feat(ui): Repeat xd-client UI with modern adaptive features
- Integrated Tailwind CSS v4 and Shadcn UI components from xd-client - Adopted xd-client modern aesthetic (oklch, radial gradients, glassmorphism) - Combined with modern adaptive 3-tier navigation logic - Refactored all pages (Profile, Login, Settings, Messages, Schedule, Grades, Debts) - Enhanced ThemeProvider with dynamic Material You palette generation - Polished overall UX and animations Refs #3 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,502 +1,201 @@
|
||||
@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 {
|
||||
--md-sys-color-primary: #0061a4;
|
||||
--md-sys-color-on-primary: #ffffff;
|
||||
--md-sys-color-primary-container: #d1e4ff;
|
||||
--md-sys-color-on-primary-container: #001d36;
|
||||
--md-sys-color-secondary: #535f70;
|
||||
--md-sys-color-on-secondary: #ffffff;
|
||||
--md-sys-color-secondary-container: #d7e3f7;
|
||||
--md-sys-color-on-secondary-container: #101c2b;
|
||||
--md-sys-color-surface: #fdfcff;
|
||||
--md-sys-color-on-surface: #1a1c1e;
|
||||
--md-sys-color-surface-variant: #dfe2eb;
|
||||
--md-sys-color-on-surface-variant: #43474e;
|
||||
--md-sys-color-outline: #73777f;
|
||||
--md-sys-color-outline-variant: #c3c7cf;
|
||||
--md-sys-color-error: #ba1a1a;
|
||||
--md-sys-color-on-error: #ffffff;
|
||||
--md-sys-color-background: #fdfcff;
|
||||
--md-sys-color-on-background: #1a1c1e;
|
||||
|
||||
--radius: 1rem;
|
||||
--nav-rail-width: 80px;
|
||||
--nav-rail-expanded-width: 280px;
|
||||
--nav-bar-height: 80px;
|
||||
|
||||
/* M3 Easings */
|
||||
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
|
||||
--md-sys-motion-duration-medium: 200ms;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--md-sys-color-primary: #9ecaff;
|
||||
--md-sys-color-on-primary: #003258;
|
||||
--md-sys-color-primary-container: #00497d;
|
||||
--md-sys-color-on-primary-container: #d1e4ff;
|
||||
--md-sys-color-secondary: #bbc7db;
|
||||
--md-sys-color-on-secondary: #253140;
|
||||
--md-sys-color-secondary-container: #3b4858;
|
||||
--md-sys-color-on-secondary-container: #d7e3f7;
|
||||
--md-sys-color-surface: #1a1c1e;
|
||||
--md-sys-color-on-surface: #e2e2e6;
|
||||
--md-sys-color-surface-variant: #43474e;
|
||||
--md-sys-color-on-surface-variant: #c3c7cf;
|
||||
--md-sys-color-outline: #8d9199;
|
||||
--md-sys-color-outline-variant: #43474e;
|
||||
--md-sys-color-error: #ffb4ab;
|
||||
--md-sys-color-on-error: #690005;
|
||||
--md-sys-color-background: #1a1c1e;
|
||||
--md-sys-color-on-background: #e2e2e6;
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@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 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--md-sys-color-background);
|
||||
color: var(--md-sys-color-on-background);
|
||||
line-height: 1.5;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* M3 Components */
|
||||
|
||||
.m3-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
background-color: var(--md-sys-color-error);
|
||||
color: var(--md-sys-color-on-error);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
transition: background-color 0.2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
background-color: rgba(var(--md-sys-color-on-surface-variant-rgb, 67, 71, 78), 0.08);
|
||||
}
|
||||
|
||||
.m3-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.1px;
|
||||
transition: all 0.2s;
|
||||
background-color: transparent;
|
||||
color: var(--md-sys-color-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.m3-button-filled {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
|
||||
.m3-button-tonal {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
||||
.m3-card {
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* M3 FAB */
|
||||
|
||||
.m3-fab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s var(--md-sys-motion-easing-emphasized);
|
||||
}
|
||||
|
||||
.m3-fab:hover {
|
||||
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
.m3-fab.extended {
|
||||
padding: 0 16px;
|
||||
width: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.m3-fab-state-layer {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: var(--md-sys-color-on-primary-container);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.m3-fab:hover .m3-fab-state-layer {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
/* M3 Filled Text Field (Section 2.1 & 2.2) */
|
||||
|
||||
.m3-text-field-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m3-text-field-field {
|
||||
position: relative;
|
||||
height: 56px;
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
border-radius: 4px 4px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m3-text-field-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px 16px 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.m3-text-field-label {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
font-size: 16px;
|
||||
transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m3-text-field-container.focused .m3-text-field-label,
|
||||
.m3-text-field-container.filled .m3-text-field-label {
|
||||
top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.m3-text-field-container.error .m3-text-field-label {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
.m3-text-field-active-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: var(--md-sys-color-outline);
|
||||
transition: height 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.m3-text-field-container.focused .m3-text-field-active-indicator {
|
||||
height: 2px;
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.m3-text-field-container.error .m3-text-field-active-indicator {
|
||||
background-color: var(--md-sys-color-error);
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.m3-text-field-state-layer {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: var(--md-sys-color-on-surface);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.m3-text-field-field:hover .m3-text-field-state-layer {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.m3-text-field-supporting-text {
|
||||
font-size: 12px;
|
||||
padding: 4px 16px 0;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.m3-text-field-container.error .m3-text-field-supporting-text {
|
||||
color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
.m3-text-field-container.disabled {
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.m3-text-field-container.disabled .m3-text-field-active-indicator {
|
||||
border-bottom: 1px dotted var(--md-sys-color-on-surface);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
transition: margin-left 0.3s var(--md-sys-motion-easing-emphasized);
|
||||
}
|
||||
|
||||
/* Navigation Bar (Mobile) */
|
||||
/* Navigation System */
|
||||
|
||||
.navigation-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: var(--nav-bar-height);
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
z-index: 100;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
@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-200 border-t border-white/5;
|
||||
}
|
||||
|
||||
.navigation-bar.hidden {
|
||||
transform: translateY(100%);
|
||||
@apply translate-y-full;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.navigation-bar { display: none; }
|
||||
.main-content { margin-left: var(--nav-rail-width); }
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.main-content.with-expanded-rail { margin-left: var(--nav-rail-expanded-width); }
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.main-content { padding-bottom: calc(var(--nav-bar-height) + 16px); }
|
||||
}
|
||||
|
||||
/* Navigation Rail (Tablet/Desktop) */
|
||||
|
||||
.navigation-rail {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--nav-rail-width);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 0;
|
||||
border-right: 1px solid var(--md-sys-color-outline-variant);
|
||||
z-index: 100;
|
||||
transition: width 0.3s var(--md-sys-motion-easing-emphasized);
|
||||
overflow-x: hidden;
|
||||
@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 {
|
||||
width: var(--nav-rail-expanded-width);
|
||||
@apply w-[var(--nav-rail-expanded-width)];
|
||||
}
|
||||
|
||||
.rail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rail-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--md-sys-color-surface-variant);
|
||||
margin: 0 12px 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--md-sys-color-primary-container);
|
||||
color: var(--md-sys-color-on-primary-container);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-group {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.rail-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Nav Items Shared */
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
height: 56px;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
transition: background-color 0.2s;
|
||||
@apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-200 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;
|
||||
}
|
||||
|
||||
.navigation-bar .nav-item {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
@apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16;
|
||||
}
|
||||
|
||||
.nav-item-icon-wrapper {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
transition: background-color 0.2s;
|
||||
position: relative;
|
||||
@apply w-12 h-8 flex items-center justify-center rounded-2xl transition-colors duration-200 relative;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-item-icon-wrapper {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
@apply bg-primary/10;
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
@apply text-[11px] font-medium whitespace-nowrap;
|
||||
}
|
||||
|
||||
.navigation-rail.expanded .nav-item {
|
||||
height: 56px;
|
||||
border-radius: 28px;
|
||||
margin: 0 12px;
|
||||
@apply h-12 rounded-2xl mx-4 px-4;
|
||||
}
|
||||
|
||||
.navigation-rail.expanded .nav-item-label {
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
flex: 1;
|
||||
@apply text-sm ml-3 flex-1;
|
||||
}
|
||||
|
||||
/* Submenu */
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 56px;
|
||||
margin-bottom: 8px;
|
||||
@apply flex flex-col pl-14 pr-4 gap-1 mb-2;
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
font-size: 14px;
|
||||
border-radius: 24px;
|
||||
margin: 0 12px;
|
||||
padding: 0 16px;
|
||||
@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 {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
||||
.submenu-arrow {
|
||||
margin-right: 8px;
|
||||
@apply bg-primary/10 text-primary font-medium;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user