| @import 'tailwindcss'; |
|
|
| @import 'tw-animate-css'; |
|
|
| @source '../views'; |
| @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; |
|
|
| @custom-variant dark (&:is(.dark *)); |
|
|
| @theme { |
| --font-sans: |
| 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', |
| 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
|
|
| --radius-lg: var(--radius); |
| --radius-md: calc(var(--radius) - 2px); |
| --radius-sm: calc(var(--radius) - 4px); |
|
|
| --color-background: var(--background); |
| --color-foreground: var(--foreground); |
|
|
| --color-card: var(--card); |
| --color-card-foreground: var(--card-foreground); |
|
|
| --color-popover: var(--popover); |
| --color-popover-foreground: var(--popover-foreground); |
|
|
| --color-primary: var(--primary); |
| --color-primary-foreground: var(--primary-foreground); |
|
|
| --color-secondary: var(--secondary); |
| --color-secondary-foreground: var(--secondary-foreground); |
|
|
| --color-muted: var(--muted); |
| --color-muted-foreground: var(--muted-foreground); |
|
|
| --color-accent: var(--accent); |
| --color-accent-foreground: var(--accent-foreground); |
|
|
| --color-destructive: var(--destructive); |
| --color-destructive-foreground: var(--destructive-foreground); |
|
|
| --color-border: var(--border); |
| --color-input: var(--input); |
| --color-ring: var(--ring); |
|
|
| --color-chart-1: var(--chart-1); |
| --color-chart-2: var(--chart-2); |
| --color-chart-3: var(--chart-3); |
| --color-chart-4: var(--chart-4); |
| --color-chart-5: var(--chart-5); |
|
|
| --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); |
| --color-sidebar-ring: var(--sidebar-ring); |
| } |
|
|
| :root { |
| --background: oklch(1 0 0); |
| --foreground: oklch(0.145 0 0); |
| --card: oklch(1 0 0); |
| --card-foreground: oklch(0.145 0 0); |
| --popover: oklch(1 0 0); |
| --popover-foreground: oklch(0.145 0 0); |
| --primary: oklch(0.205 0 0); |
| --primary-foreground: oklch(0.985 0 0); |
| --secondary: oklch(0.97 0 0); |
| --secondary-foreground: oklch(0.205 0 0); |
| --muted: oklch(0.97 0 0); |
| --muted-foreground: oklch(0.556 0 0); |
| --accent: oklch(0.97 0 0); |
| --accent-foreground: oklch(0.205 0 0); |
| --destructive: oklch(0.577 0.245 27.325); |
| --destructive-foreground: oklch(0.577 0.245 27.325); |
| --border: oklch(0.922 0 0); |
| --input: oklch(0.922 0 0); |
| --ring: oklch(0.87 0 0); |
| --chart-1: oklch(0.646 0.222 41.116); |
| --chart-2: oklch(0.6 0.118 184.704); |
| --chart-3: oklch(0.398 0.07 227.392); |
| --chart-4: oklch(0.828 0.189 84.429); |
| --chart-5: oklch(0.769 0.188 70.08); |
| --radius: 0.625rem; |
| --sidebar: oklch(0.985 0 0); |
| --sidebar-foreground: oklch(0.145 0 0); |
| --sidebar-primary: oklch(0.205 0 0); |
| --sidebar-primary-foreground: oklch(0.985 0 0); |
| --sidebar-accent: oklch(0.97 0 0); |
| --sidebar-accent-foreground: oklch(0.205 0 0); |
| --sidebar-border: oklch(0.922 0 0); |
| --sidebar-ring: oklch(0.87 0 0); |
|
|
| --app-bg: #fafbff; |
| --app-sidebar-bg: #ffffff; |
| --app-surface: #ffffff; |
| --app-surface-soft: #eef4ff; |
| --app-surface-muted: rgba(217, 217, 217, 0.32); |
| --app-border: rgba(0, 0, 0, 0.14); |
| --app-border-soft: rgba(0, 0, 0, 0.08); |
| --app-border-strong: #739af1; |
| --app-text: #0a0a0a; |
| --app-muted: #737373; |
| --app-primary: #2764eb; |
| --app-primary-soft: #ccdcff; |
| --app-primary-foreground: #ffffff; |
| --app-danger: #ef4444; |
| --app-success: var(--app-primary); |
| --app-placeholder: rgba(115, 115, 115, 0.42); |
| --app-toggle-bg: rgba(255, 255, 255, 0.9); |
| --app-shadow: 1px 1px 4.5px rgba(39, 100, 235, 0.36); |
| --app-composer-shadow: 0 10px 24px rgba(39, 100, 235, 0.28); |
|
|
| --welcome-shell-bg: var(--app-bg); |
| --welcome-title: var(--app-text); |
| --welcome-subtitle: var(--app-muted); |
| --welcome-accent: var(--app-primary); |
| --welcome-accent-foreground: var(--app-primary-foreground); |
| --welcome-accent-soft: var(--app-primary-soft); |
| --welcome-toggle-bg: var(--app-toggle-bg); |
| --welcome-card-bg: var(--app-surface); |
| --welcome-card-border: var(--app-border); |
| --welcome-card-active-border: var(--app-border-strong); |
| --welcome-card-active-shadow: var(--app-shadow); |
| --welcome-icon-muted-bg: var(--app-surface-muted); |
| --welcome-icon-muted-border: var(--app-border-soft); |
| --welcome-icon-active-border: color-mix( |
| in oklab, |
| var(--app-primary) 26%, |
| transparent |
| ); |
| --register-shell-bg: var(--welcome-shell-bg); |
| --register-card-bg: var(--welcome-card-bg); |
| --register-card-border: var(--welcome-card-active-border); |
| --register-card-shadow: var(--welcome-card-active-shadow); |
| --register-input-bg: color-mix( |
| in oklab, |
| var(--app-primary) 13%, |
| var(--app-surface) |
| ); |
| --register-input-border: var(--app-border-soft); |
| --register-button-border: var(--app-border-soft); |
| --register-placeholder: var(--welcome-subtitle); |
| --register-danger: var(--app-danger); |
| --student-bg: var(--app-bg); |
| --student-sidebar-bg: var(--app-sidebar-bg); |
| --student-surface: var(--app-surface); |
| --student-surface-soft: var(--app-surface-soft); |
| --student-border: var(--app-border); |
| --student-border-strong: var(--app-border-strong); |
| --student-text: var(--app-text); |
| --student-muted: var(--app-muted); |
| --student-primary: var(--app-primary); |
| --student-primary-soft: var(--app-primary-soft); |
| --student-primary-foreground: var(--app-primary-foreground); |
| --student-danger: var(--app-danger); |
| --student-success: var(--app-success); |
| --student-placeholder: var(--app-placeholder); |
| --student-shadow: 0 24px 70px rgba(15, 23, 42, 0.08); |
| --student-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08); |
| --student-composer-shadow: var(--app-composer-shadow); |
| --lecturer-bg: var(--app-bg); |
| --lecturer-sidebar-bg: var(--app-sidebar-bg); |
| --lecturer-surface: var(--app-surface); |
| --lecturer-surface-soft: var(--app-surface-soft); |
| --lecturer-border: var(--app-border); |
| --lecturer-border-soft: var(--app-border-soft); |
| --lecturer-border-strong: var(--app-border-strong); |
| --lecturer-text: var(--app-text); |
| --lecturer-muted: var(--app-muted); |
| --lecturer-primary: var(--app-primary); |
| --lecturer-primary-soft: var(--app-primary-soft); |
| --lecturer-primary-foreground: var(--app-primary-foreground); |
| --lecturer-danger: var(--app-danger); |
| --lecturer-success: var(--app-success); |
| --lecturer-shadow: 0 18px 42px rgba(15, 23, 42, 0.08); |
| --lecturer-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08); |
| } |
|
|
| .dark { |
| --background: #1f1f1f; |
| --foreground: #f4f4f5; |
| --card: #171717; |
| --card-foreground: #f4f4f5; |
| --popover: #171717; |
| --popover-foreground: #f4f4f5; |
| --primary: #3478ff; |
| --primary-foreground: #ffffff; |
| --secondary: #262626; |
| --secondary-foreground: #f4f4f5; |
| --muted: #262626; |
| --muted-foreground: #737373; |
| --accent: #262626; |
| --accent-foreground: #f4f4f5; |
| --destructive: oklch(0.396 0.141 25.723); |
| --destructive-foreground: oklch(0.637 0.237 25.331); |
| --border: rgba(255, 255, 255, 0.12); |
| --input: rgba(255, 255, 255, 0.12); |
| --ring: #3478ff; |
| --chart-1: oklch(0.488 0.243 264.376); |
| --chart-2: oklch(0.696 0.17 162.48); |
| --chart-3: oklch(0.769 0.188 70.08); |
| --chart-4: oklch(0.627 0.265 303.9); |
| --chart-5: oklch(0.645 0.246 16.439); |
| --sidebar: #171717; |
| --sidebar-foreground: #f4f4f5; |
| --sidebar-primary: #3478ff; |
| --sidebar-primary-foreground: #ffffff; |
| --sidebar-accent: #262626; |
| --sidebar-accent-foreground: #f4f4f5; |
| --sidebar-border: rgba(255, 255, 255, 0.12); |
| --sidebar-ring: #3478ff; |
|
|
| --app-bg: #1f1f1f; |
| --app-sidebar-bg: #171717; |
| --app-surface: #171717; |
| --app-surface-soft: #262626; |
| --app-surface-muted: rgba(255, 255, 255, 0.08); |
| --app-border: rgba(255, 255, 255, 0.12); |
| --app-border-soft: rgba(255, 255, 255, 0.1); |
| --app-border-strong: #3478ff; |
| --app-text: #f4f4f5; |
| --app-muted: #737373; |
| --app-primary: #3478ff; |
| --app-primary-soft: #c8d7ff; |
| --app-primary-foreground: #ffffff; |
| --app-danger: #ff4545; |
| --app-success: var(--app-primary); |
| --app-placeholder: rgba(244, 244, 245, 0.42); |
| --app-toggle-bg: #171717; |
| --app-shadow: 0 0 20px rgba(52, 120, 255, 0.34); |
| --app-composer-shadow: 0 0 28px rgba(52, 120, 255, 0.36); |
|
|
| --welcome-shell-bg: var(--app-bg); |
| --welcome-title: var(--app-text); |
| --welcome-subtitle: var(--app-muted); |
| --welcome-accent: var(--app-primary); |
| --welcome-accent-foreground: var(--app-primary-foreground); |
| --welcome-accent-soft: var(--app-primary-soft); |
| --welcome-toggle-bg: var(--app-toggle-bg); |
| --welcome-card-bg: var(--app-surface); |
| --welcome-card-border: var(--app-border); |
| --welcome-card-active-border: var(--app-border-strong); |
| --welcome-card-active-shadow: var(--app-shadow); |
| --welcome-icon-muted-bg: var(--app-surface-muted); |
| --welcome-icon-muted-border: var(--app-border-soft); |
| --welcome-icon-active-border: color-mix( |
| in oklab, |
| var(--app-primary) 42%, |
| transparent |
| ); |
| --register-shell-bg: var(--welcome-shell-bg); |
| --register-card-bg: var(--welcome-card-bg); |
| --register-card-border: var(--welcome-card-active-border); |
| --register-card-shadow: var(--welcome-card-active-shadow); |
| --register-input-bg: var(--app-surface); |
| --register-input-border: var(--app-border); |
| --register-button-border: var(--app-border); |
| --register-placeholder: var(--welcome-subtitle); |
| --register-danger: var(--app-danger); |
| --student-bg: var(--app-bg); |
| --student-sidebar-bg: var(--app-sidebar-bg); |
| --student-surface: var(--app-surface); |
| --student-surface-soft: var(--app-surface-soft); |
| --student-border: var(--app-border); |
| --student-border-strong: var(--app-border-strong); |
| --student-text: var(--app-text); |
| --student-muted: var(--app-muted); |
| --student-primary: var(--app-primary); |
| --student-primary-soft: var(--app-primary-soft); |
| --student-primary-foreground: var(--app-primary-foreground); |
| --student-danger: var(--app-danger); |
| --student-success: var(--app-success); |
| --student-placeholder: var(--app-placeholder); |
| --student-shadow: 0 24px 70px rgba(0, 0, 0, 0.18); |
| --student-sidebar-shadow: 1px 0 0 var(--app-border); |
| --student-composer-shadow: var(--app-composer-shadow); |
| --lecturer-bg: var(--app-bg); |
| --lecturer-sidebar-bg: var(--app-sidebar-bg); |
| --lecturer-surface: var(--app-surface); |
| --lecturer-surface-soft: var(--app-surface-soft); |
| --lecturer-border: var(--app-border); |
| --lecturer-border-soft: var(--app-border-soft); |
| --lecturer-border-strong: var(--app-border-strong); |
| --lecturer-text: var(--app-text); |
| --lecturer-muted: var(--app-muted); |
| --lecturer-primary: var(--app-primary); |
| --lecturer-primary-soft: color-mix( |
| in oklab, |
| var(--app-primary) 22%, |
| var(--app-surface) |
| ); |
| --lecturer-primary-foreground: var(--app-primary-foreground); |
| --lecturer-danger: var(--app-danger); |
| --lecturer-success: var(--app-success); |
| --lecturer-shadow: 0 18px 42px rgba(0, 0, 0, 0.2); |
| --lecturer-sidebar-shadow: 1px 0 0 var(--app-border); |
| } |
|
|
| @layer base { |
| * { |
| @apply border-border; |
| } |
|
|
| body { |
| @apply bg-background text-foreground; |
| } |
|
|
| button:not(:disabled), |
| [role='button']:not([aria-disabled='true']), |
| [data-slot='button']:not([aria-disabled='true']) { |
| @apply cursor-pointer; |
| } |
|
|
| button:disabled, |
| [aria-disabled='true'] { |
| @apply cursor-not-allowed; |
| } |
| } |
|
|
| @keyframes app-loading-dot { |
| 0%, |
| 80%, |
| 100% { |
| opacity: 0.24; |
| transform: translateY(0); |
| } |
|
|
| 40% { |
| opacity: 1; |
| transform: translateY(-0.12rem); |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| .app-loading-dot { |
| animation: none !important; |
| opacity: 1; |
| transform: none; |
| } |
| } |
|
|
| @layer components { |
| .app-loading-indicator { |
| @apply inline-flex items-center justify-center gap-2 whitespace-nowrap; |
| } |
|
|
| .app-loading-spinner { |
| @apply shrink-0; |
| } |
|
|
| .app-loading-dots { |
| @apply inline-flex min-w-[1.05em] items-center justify-start; |
| } |
|
|
| .app-loading-dot { |
| animation: app-loading-dot 1.2s infinite ease-in-out both; |
| line-height: 1; |
| } |
|
|
| .app-loading-dot:nth-child(2) { |
| animation-delay: 0.16s; |
| } |
|
|
| .app-loading-dot:nth-child(3) { |
| animation-delay: 0.32s; |
| } |
|
|
| .welcome-shell { |
| @apply relative flex min-h-svh items-center justify-center px-4 py-8 sm:px-6; |
| background-color: var(--welcome-shell-bg); |
| } |
|
|
| .welcome-content { |
| @apply w-full max-w-[561px] space-y-7; |
| } |
|
|
| .welcome-theme-toggle { |
| @apply absolute top-4 right-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:top-8 sm:right-8; |
| background-color: var(--welcome-toggle-bg); |
| border-color: var(--welcome-card-active-border); |
| color: var(--welcome-accent); |
| } |
|
|
| .welcome-logo { |
| @apply mx-auto flex h-[77px] w-[77px] items-center justify-center rounded-[15px] border border-white; |
| background-color: var(--welcome-accent); |
| color: var(--welcome-accent-foreground); |
| } |
|
|
| .welcome-title { |
| @apply text-center text-[34px] leading-tight font-bold tracking-[0.01em] sm:text-[40px]; |
| color: var(--welcome-title); |
| } |
|
|
| .welcome-subtitle { |
| @apply text-center text-[15px] leading-normal sm:text-[20px]; |
| color: var(--welcome-subtitle); |
| } |
|
|
| .welcome-entries { |
| @apply space-y-3; |
| } |
|
|
| .welcome-entry-card { |
| @apply gap-0 overflow-hidden rounded-[17px] border py-0 transition-[border-color,box-shadow]; |
| background-color: var(--welcome-card-bg); |
| border-color: var(--welcome-card-border); |
| box-shadow: none; |
| } |
|
|
| .welcome-entry-card:hover, |
| .welcome-entry-card:focus-within { |
| border-color: var(--welcome-card-active-border); |
| box-shadow: var(--welcome-card-active-shadow); |
| } |
|
|
| .welcome-entry-link { |
| @apply flex h-[90px] items-center justify-between gap-3 px-3.5 py-2.5 outline-none focus-visible:ring-2 sm:px-4; |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--welcome-accent) 35%, |
| transparent |
| ); |
| } |
|
|
| .welcome-entry-icon { |
| @apply flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-[10px] border transition-colors; |
| background-color: var(--welcome-icon-muted-bg); |
| border-color: var(--welcome-icon-muted-border); |
| color: var(--welcome-subtitle); |
| } |
|
|
| .welcome-entry-card:hover .welcome-entry-icon, |
| .welcome-entry-card:focus-within .welcome-entry-icon { |
| background-color: var(--welcome-accent-soft); |
| border-color: var(--welcome-icon-active-border); |
| color: var(--welcome-accent); |
| } |
|
|
| .welcome-entry-title { |
| @apply truncate text-left text-lg leading-tight font-semibold; |
| color: var(--welcome-title); |
| } |
|
|
| .welcome-entry-description { |
| @apply mt-1 truncate text-left text-[13px] leading-tight; |
| color: var(--welcome-subtitle); |
| } |
|
|
| .welcome-entry-arrow { |
| @apply h-4 w-4 shrink-0 transition-transform group-hover:translate-x-0.5; |
| color: var(--welcome-title); |
| } |
|
|
| .welcome-register { |
| @apply text-center text-[13px]; |
| color: var(--welcome-subtitle); |
| } |
|
|
| .welcome-register-link { |
| @apply font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none; |
| color: var(--welcome-accent); |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--welcome-accent) 35%, |
| transparent |
| ); |
| } |
|
|
| .register-shell { |
| @apply relative flex min-h-svh items-center justify-center px-4 py-8 sm:px-6; |
| background-color: var(--register-shell-bg); |
| } |
|
|
| .register-choice-content { |
| @apply w-full max-w-[561px]; |
| } |
|
|
| .register-choice-back { |
| @apply mb-3; |
| } |
|
|
| .register-choice-options { |
| @apply space-y-3; |
| } |
|
|
| .register-choice-card[data-highlighted='true'] { |
| border-color: var(--welcome-card-active-border); |
| box-shadow: var(--welcome-card-active-shadow); |
| } |
|
|
| .register-choice-card[data-highlighted='true'] .welcome-entry-icon { |
| background-color: var(--welcome-accent-soft); |
| border-color: var(--welcome-icon-active-border); |
| color: var(--welcome-accent); |
| } |
|
|
| .register-card { |
| @apply w-full max-w-[460px] gap-0 rounded-[17px] border py-0; |
| background-color: var(--register-card-bg) !important; |
| border-color: var(--register-card-border) !important; |
| box-shadow: var(--register-card-shadow) !important; |
| } |
|
|
| .register-card-content { |
| @apply px-5 py-6 sm:px-[38px] sm:py-7; |
| } |
|
|
| .register-back-link { |
| @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:ring-2 focus-visible:outline-none; |
| color: var(--welcome-subtitle); |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--welcome-accent) 35%, |
| transparent |
| ); |
| } |
|
|
| .register-heading { |
| @apply mt-2 text-center text-2xl leading-tight font-semibold; |
| color: var(--welcome-title); |
| } |
|
|
| .register-form { |
| @apply mt-7 flex flex-col gap-4; |
| } |
|
|
| .register-field { |
| @apply grid gap-1.5; |
| } |
|
|
| .register-label { |
| @apply text-base leading-none font-medium; |
| color: var(--welcome-title); |
| } |
|
|
| .register-input { |
| @apply h-[43px] rounded-[6px] px-3.5 text-sm shadow-none; |
| background-color: var(--register-input-bg) !important; |
| border-color: var(--register-input-border) !important; |
| color: var(--welcome-title) !important; |
| } |
|
|
| .register-input::placeholder { |
| color: var(--register-placeholder); |
| opacity: 1; |
| } |
|
|
| .register-input:focus-visible { |
| border-color: var(--register-card-border) !important; |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--welcome-accent) 35%, |
| transparent |
| ); |
| } |
|
|
| .register-input[aria-invalid='true'] { |
| border-color: var(--register-danger) !important; |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--register-danger) 28%, |
| transparent |
| ); |
| } |
|
|
| .register-error { |
| @apply text-xs leading-snug; |
| color: var(--register-danger); |
| } |
|
|
| .register-submit { |
| @apply mt-1 h-[43px] w-full rounded-[6px] border text-base font-semibold shadow-none; |
| background-color: var(--welcome-accent) !important; |
| border-color: var(--register-button-border) !important; |
| color: var(--welcome-accent-foreground) !important; |
| } |
|
|
| .register-submit:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--welcome-accent) 88%, |
| var(--register-card-bg) |
| ) !important; |
| } |
|
|
| .login-card { |
| @apply max-w-[460px]; |
| } |
|
|
| .login-card-content { |
| @apply px-5 py-7 sm:px-[38px] sm:py-8; |
| } |
|
|
| .login-heading { |
| @apply mt-2; |
| } |
|
|
| .login-form { |
| @apply mt-8 flex flex-col gap-4; |
| } |
|
|
| .login-remember { |
| @apply flex items-center gap-3; |
| } |
|
|
| .login-remember-label { |
| @apply text-sm leading-none font-normal; |
| color: var(--welcome-subtitle); |
| } |
|
|
| .login-submit { |
| @apply mt-2; |
| } |
|
|
| .login-register-text { |
| @apply mt-4; |
| } |
|
|
| .login-status { |
| @apply mt-4 text-center text-sm font-medium; |
| color: var(--app-success); |
| } |
|
|
| .login-error { |
| color: var(--register-danger); |
| } |
|
|
| .student-dashboard-shell { |
| @apply h-svh min-h-svh overflow-hidden; |
| background-color: var(--student-bg); |
| color: var(--student-text); |
| } |
|
|
| .student-sidebar { |
| border-color: var(--student-border) !important; |
| } |
|
|
| .student-sidebar [data-sidebar='sidebar'] { |
| background-color: var(--student-sidebar-bg); |
| border-color: var(--student-border); |
| box-shadow: var(--student-sidebar-shadow); |
| } |
|
|
| .student-sidebar-top { |
| @apply border-b; |
| border-color: var(--student-border); |
| display: flex !important; |
| height: 72px !important; |
| flex-direction: row !important; |
| align-items: center !important; |
| justify-content: space-between !important; |
| gap: 0 !important; |
| padding: 0 20px !important; |
| } |
|
|
| .student-logo-action { |
| @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] transition-transform outline-none focus-visible:ring-2; |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--student-primary) 45%, |
| transparent |
| ); |
| } |
|
|
| .student-logo-action:hover { |
| @apply scale-[1.03]; |
| } |
|
|
| .student-logo-mark { |
| @apply flex size-8 items-center justify-center rounded-[8px]; |
| background-color: var(--student-primary); |
| color: var(--student-primary-foreground); |
| } |
|
|
| .student-sidebar-trigger { |
| @apply rounded-[8px] shadow-none; |
| color: var(--student-text); |
| width: 32px !important; |
| height: 32px !important; |
| } |
|
|
| .student-sidebar-trigger:hover { |
| background-color: var(--student-surface-soft); |
| color: var(--student-text); |
| } |
|
|
| .student-sidebar-content { |
| gap: 0 !important; |
| } |
|
|
| .student-history-group { |
| padding: 0 !important; |
| } |
|
|
| .student-history-label { |
| @apply border-b text-xs font-medium; |
| border-color: var(--student-border); |
| color: var(--student-text); |
| display: flex !important; |
| height: 44px !important; |
| align-items: center !important; |
| gap: 6px !important; |
| border-radius: 0 !important; |
| padding: 0 20px !important; |
| margin: 0 !important; |
| width: 100% !important; |
| background-color: transparent !important; |
| cursor: pointer; |
| } |
|
|
| .student-history-label:hover { |
| background-color: var(--student-surface-soft) !important; |
| } |
|
|
| .student-history-chevron { |
| @apply ml-auto size-3 transition-transform; |
| } |
|
|
| .student-history-label[aria-expanded='false'] .student-history-chevron { |
| transform: rotate(-90deg); |
| } |
|
|
| .student-history-list { |
| gap: 4px !important; |
| padding: 12px 20px !important; |
| } |
|
|
| .student-history-menu-item { |
| @apply relative; |
| } |
|
|
| .student-history-menu-button { |
| @apply rounded-[8px] text-left shadow-none; |
| color: var(--student-muted); |
| height: auto !important; |
| min-height: 42px !important; |
| padding: 8px 34px 8px 4px !important; |
| align-items: flex-start !important; |
| } |
|
|
| .student-history-menu-button:hover, |
| .student-history-menu-button[data-active='true'] { |
| background-color: var(--student-surface-soft); |
| color: var(--student-text); |
| } |
|
|
| .student-history-delete { |
| @apply absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity; |
| color: var(--student-danger); |
| } |
|
|
| .student-history-menu-item:hover .student-history-delete, |
| .student-history-menu-button[data-active='true'] + .student-history-delete { |
| @apply opacity-100; |
| } |
|
|
| .student-history-delete:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--student-danger) 12%, |
| transparent |
| ); |
| } |
|
|
| .student-delete-dialog { |
| @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px]; |
| background-color: var(--student-surface); |
| border-color: var(--student-border); |
| box-shadow: var(--student-shadow); |
| color: var(--student-text); |
| } |
|
|
| .student-delete-dialog-body { |
| @apply flex flex-col gap-3; |
| } |
|
|
| .student-delete-copy { |
| @apply text-sm leading-relaxed; |
| color: var(--student-muted); |
| } |
|
|
| .student-delete-copy strong { |
| color: var(--student-text); |
| } |
|
|
| .student-delete-error { |
| @apply rounded-[10px] border px-4 py-3 text-sm font-medium; |
| background-color: color-mix( |
| in oklab, |
| var(--student-danger) 8%, |
| var(--student-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--student-danger) 24%, |
| transparent |
| ); |
| color: var(--student-danger); |
| } |
|
|
| .student-delete-dialog-footer { |
| @apply gap-3 pt-1; |
| } |
|
|
| .student-delete-cancel { |
| @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none; |
| background-color: var(--student-surface) !important; |
| border-color: var(--student-border) !important; |
| color: var(--student-text) !important; |
| } |
|
|
| .student-delete-cancel:hover { |
| background-color: var(--student-surface-soft) !important; |
| } |
|
|
| .student-delete-confirm { |
| @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none; |
| background-color: var(--student-danger) !important; |
| color: var(--student-primary-foreground) !important; |
| } |
|
|
| .student-delete-confirm:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--student-danger) 86%, |
| #000 |
| ) !important; |
| } |
|
|
| .student-history-menu-icon { |
| @apply hidden; |
| color: var(--student-text); |
| } |
|
|
| .student-history-copy, |
| .student-user-copy { |
| @apply min-w-0; |
| } |
|
|
| .student-history-title { |
| @apply block truncate text-sm leading-tight font-medium; |
| color: var(--student-text); |
| } |
|
|
| .student-history-meta { |
| @apply mt-1 block truncate text-xs leading-tight; |
| color: var(--student-muted); |
| } |
|
|
| .student-sidebar-footer { |
| @apply mt-auto border-t; |
| border-color: var(--student-border); |
| padding: 16px 20px !important; |
| } |
|
|
| .student-user-menu-button { |
| @apply mb-2 w-fit gap-2 rounded-[6px] shadow-none cursor-default; |
| background-color: var(--student-surface-soft); |
| color: var(--student-text); |
| height: auto !important; |
| padding: 6px 8px !important; |
| } |
|
|
| .student-user-menu-button:hover { |
| background-color: var(--student-surface-soft); |
| color: var(--student-text); |
| } |
|
|
| .student-user-avatar { |
| @apply size-6 text-[8px]; |
| background-color: var(--student-surface); |
| color: var(--student-text); |
| } |
|
|
| .student-user-name { |
| @apply block truncate text-xs leading-tight font-semibold; |
| color: var(--student-text); |
| } |
|
|
| .student-user-role { |
| @apply block truncate text-[11px] leading-tight; |
| color: var(--student-muted); |
| } |
|
|
| .student-logout-button { |
| @apply justify-start gap-1 rounded-none text-[11px] font-normal shadow-none; |
| color: var(--student-danger); |
| height: auto !important; |
| padding: 10px 16px !important; |
| } |
|
|
| .student-logout-button:hover { |
| background-color: transparent; |
| color: var(--student-danger); |
| } |
|
|
| .group[data-collapsible='icon'] .student-sidebar-top { |
| justify-content: center !important; |
| padding: 0 !important; |
| } |
|
|
| .group[data-collapsible='icon'] .student-sidebar-trigger { |
| display: none !important; |
| } |
|
|
| .group[data-collapsible='icon'] .student-history-list { |
| padding: 12px 8px !important; |
| } |
|
|
| .group[data-collapsible='icon'] .student-history-label { |
| display: none !important; |
| } |
|
|
| .group[data-collapsible='icon'] .student-history-menu-button, |
| .group[data-collapsible='icon'] .student-user-menu-button, |
| .group[data-collapsible='icon'] .student-logout-button { |
| @apply mx-auto flex items-center justify-center rounded-[8px]; |
| background-color: transparent; |
| width: 32px !important; |
| height: 32px !important; |
| min-height: 32px !important; |
| padding: 0 !important; |
| } |
|
|
| .group[data-collapsible='icon'] .student-history-menu-icon { |
| @apply block; |
| } |
|
|
| .group[data-collapsible='icon'] .student-history-copy, |
| .group[data-collapsible='icon'] .student-user-copy, |
| .group[data-collapsible='icon'] .student-logout-button span { |
| @apply hidden; |
| } |
|
|
| .group[data-collapsible='icon'] .student-sidebar-footer { |
| @apply px-2; |
| } |
|
|
| .student-workspace { |
| @apply flex h-svh min-w-0 flex-1 flex-col overflow-hidden; |
| background-color: var(--student-bg); |
| color: var(--student-text); |
| } |
|
|
| .student-topbar { |
| @apply sticky top-0 z-20 flex h-[72px] shrink-0 items-center justify-between border-b px-5 sm:px-6; |
| background-color: var(--student-surface); |
| border-color: var(--student-border); |
| } |
|
|
| .student-brand-title { |
| @apply text-base font-bold; |
| color: var(--student-text); |
| } |
|
|
| .student-topbar-actions { |
| @apply flex items-center gap-3; |
| } |
|
|
| .student-theme-toggle { |
| @apply static size-8 rounded-[8px] shadow-none sm:static; |
| background-color: var(--student-surface) !important; |
| border-color: var(--student-border-strong) !important; |
| color: var(--student-primary) !important; |
| } |
|
|
| .student-new-session-button { |
| @apply h-8 rounded-[8px] px-4 text-xs font-semibold shadow-none; |
| background-color: var(--student-primary) !important; |
| color: var(--student-primary-foreground) !important; |
| } |
|
|
| .student-chat-stage { |
| @apply flex min-h-0 flex-1 items-center justify-center px-4 py-10; |
| } |
|
|
| .student-empty-state { |
| @apply flex w-full max-w-[610px] -translate-y-8 flex-col items-center; |
| } |
|
|
| .student-empty-icon { |
| @apply mb-5 flex size-[52px] items-center justify-center rounded-[12px]; |
| background-color: var(--student-primary-soft); |
| color: var(--student-primary); |
| } |
|
|
| .student-empty-icon--thinking { |
| @apply animate-pulse; |
| background-color: var(--student-primary); |
| color: var(--student-primary-foreground); |
| } |
|
|
| .student-greeting { |
| @apply mb-9 text-center; |
| } |
|
|
| .student-greeting h2 { |
| @apply text-3xl leading-tight font-bold tracking-[-0.02em]; |
| color: var(--student-text); |
| } |
|
|
| .student-greeting p { |
| @apply mt-2 text-sm; |
| color: var(--student-muted); |
| } |
|
|
| .student-composer-card { |
| @apply w-full gap-0 rounded-[14px] border py-0 shadow-none; |
| background-color: var(--student-surface); |
| border-color: var(--student-border-strong); |
| box-shadow: var(--student-composer-shadow); |
| } |
|
|
| .student-composer-content { |
| @apply relative min-h-[225px] px-5 py-4; |
| } |
|
|
| .student-composer-form { |
| display: contents; |
| } |
|
|
| .student-status { |
| @apply -mt-5 mb-5 text-center text-xs font-medium; |
| color: var(--student-danger); |
| } |
|
|
| .student-status--success { |
| color: var(--student-success); |
| } |
|
|
| .student-course-row { |
| @apply flex flex-wrap items-center gap-2 text-[11px] font-medium; |
| color: var(--student-text); |
| } |
|
|
| .student-course-icon, |
| .student-question-icon { |
| color: var(--student-primary); |
| } |
|
|
| .student-course-label { |
| @apply whitespace-nowrap; |
| } |
|
|
| .student-course-select { |
| @apply h-6 w-[180px] rounded-[5px] px-2 text-[10px] shadow-none; |
| background-color: var(--student-surface) !important; |
| border-color: var(--student-border-strong) !important; |
| color: var(--student-text) !important; |
| } |
|
|
| .student-course-select svg { |
| @apply size-3; |
| } |
|
|
| .student-composer-divider { |
| @apply my-4 h-px w-full; |
| background-color: var(--student-border); |
| } |
|
|
| .student-question-row { |
| @apply flex items-start gap-3; |
| } |
|
|
| .student-question-row textarea { |
| @apply min-h-[118px] flex-1 resize-none bg-transparent pt-0 text-[11px] outline-none; |
| color: var(--student-text); |
| } |
|
|
| .student-question-row textarea::placeholder { |
| color: var(--student-placeholder); |
| } |
|
|
| .student-floating-send { |
| @apply absolute right-5 bottom-4 size-8 rounded-[8px] shadow-none; |
| background-color: var(--student-primary) !important; |
| color: var(--student-primary-foreground) !important; |
| } |
|
|
| .student-chat-stage--session { |
| @apply relative min-h-0 flex-col items-stretch justify-between overflow-hidden px-0 py-0; |
| } |
|
|
| .student-chat-thread { |
| @apply min-h-0 w-full flex-1 overflow-y-auto overscroll-contain px-5 pt-8; |
| padding-bottom: 12.5rem; |
| } |
|
|
| .student-chat-messages { |
| @apply flex min-h-full w-full flex-col gap-6; |
| } |
|
|
| .student-chat-loading { |
| @apply mt-24 text-center text-sm; |
| color: var(--student-muted); |
| } |
|
|
| .student-chat-status { |
| @apply mt-0 mb-4; |
| } |
|
|
| .student-message { |
| @apply flex w-full items-start gap-3.5; |
| } |
|
|
| .student-message--assistant { |
| @apply justify-start; |
| } |
|
|
| .student-message--user { |
| @apply justify-end; |
| } |
|
|
| .student-message-avatar { |
| @apply flex size-9 shrink-0 items-center justify-center rounded-[10px]; |
| } |
|
|
| .student-message-avatar--assistant { |
| background-color: var(--student-primary); |
| color: var(--student-primary-foreground); |
| } |
|
|
| .student-message-avatar--user { |
| background-color: var(--student-primary-soft); |
| color: var(--student-primary); |
| } |
|
|
| .student-message-bubble { |
| @apply max-w-[min(760px,88%)] rounded-[10px] border px-4 py-3.5 text-base shadow-none; |
| background-color: var(--student-surface); |
| border-color: var(--student-border-strong); |
| color: var(--student-primary); |
| } |
|
|
| .student-message--assistant .student-message-bubble { |
| color: var(--student-text); |
| } |
|
|
| .student-message--user .student-message-bubble { |
| background-color: var(--student-primary); |
| border-color: var(--student-primary); |
| color: var(--student-primary-foreground); |
| } |
|
|
| .student-message-content { |
| @apply text-base leading-relaxed whitespace-pre-wrap; |
| } |
|
|
| .student-message-caret { |
| @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px]; |
| background-color: currentColor; |
| } |
|
|
| .student-message-time { |
| @apply mt-2 block text-[10px]; |
| color: color-mix(in oklab, currentColor 72%, transparent); |
| } |
|
|
| .student-message-sources { |
| @apply mt-3 flex flex-wrap gap-2; |
| } |
|
|
| .student-message-source { |
| @apply rounded-full border px-2 py-1 text-[10px]; |
| border-color: color-mix( |
| in oklab, |
| var(--student-primary) 24%, |
| transparent |
| ); |
| color: inherit; |
| } |
|
|
| .student-message-bubble--typing { |
| @apply text-[11px]; |
| color: var(--student-muted); |
| } |
|
|
| .student-chat-scroll-anchor { |
| scroll-margin-bottom: 13.5rem; |
| } |
|
|
| .student-chat-composer { |
| @apply pointer-events-none absolute right-5 bottom-8 left-5 z-10 w-auto pb-0; |
| } |
|
|
| .student-composer-card--dock { |
| @apply pointer-events-auto w-full; |
| -webkit-backdrop-filter: blur(18px) saturate(1.25); |
| backdrop-filter: blur(18px) saturate(1.25); |
| background-color: color-mix( |
| in oklab, |
| var(--student-surface) 76%, |
| transparent |
| ) !important; |
| } |
|
|
| .student-composer-card--dock .student-composer-content { |
| @apply min-h-[116px]; |
| } |
|
|
| .student-composer-card--dock .student-question-row textarea { |
| @apply min-h-[38px]; |
| } |
|
|
| .student-chat-updated-at { |
| @apply mt-3 text-center text-[11px]; |
| color: var(--student-muted); |
| } |
|
|
| .embed-shell { |
| @apply relative flex h-svh flex-col overflow-hidden px-6 py-5; |
| background-color: var(--embed-bg); |
| color: var(--embed-text); |
| } |
|
|
| .embed-toolbar { |
| @apply relative z-20 flex shrink-0 items-start justify-between gap-4; |
| } |
|
|
| .embed-tabs { |
| @apply flex h-8 items-center gap-1 rounded-full p-1 shadow-sm; |
| background-color: color-mix( |
| in oklab, |
| var(--embed-muted) 20%, |
| transparent |
| ); |
| } |
|
|
| .embed-tabs button { |
| @apply h-6 rounded-full px-6 text-sm font-medium transition; |
| color: var(--embed-text); |
| } |
|
|
| .embed-tabs button[aria-selected='true'] { |
| @apply shadow-sm; |
| background-color: var(--embed-surface); |
| } |
|
|
| .embed-actions { |
| @apply flex items-center gap-5; |
| } |
|
|
| .embed-icon-button { |
| @apply flex size-8 items-center justify-center rounded-[5px] transition; |
| color: var(--embed-text); |
| } |
|
|
| .embed-icon-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--embed-muted) 14%, |
| transparent |
| ); |
| } |
|
|
| .embed-icon-button--primary { |
| background-color: var(--embed-primary); |
| color: #ffffff; |
| } |
|
|
| .embed-icon-button--primary:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--embed-primary) 88%, |
| #ffffff |
| ); |
| } |
|
|
| .embed-chat { |
| @apply relative flex min-h-0 flex-1 flex-col items-center justify-center; |
| } |
|
|
| .embed-chat--session { |
| @apply items-stretch justify-start; |
| } |
|
|
| .embed-empty-state { |
| @apply mx-auto flex w-full max-w-[620px] -translate-y-5 flex-col items-center text-center; |
| } |
|
|
| .embed-empty-icon { |
| @apply mb-5 flex size-[52px] items-center justify-center rounded-[14px]; |
| background-color: var(--embed-primary-soft); |
| color: var(--embed-primary); |
| } |
|
|
| .embed-empty-state h1 { |
| @apply text-2xl leading-tight font-bold tracking-[-0.02em]; |
| color: var(--embed-text); |
| } |
|
|
| .embed-empty-state p { |
| @apply mt-2 text-sm; |
| color: var(--embed-muted); |
| } |
|
|
| .embed-status { |
| @apply mt-4 text-center text-sm font-medium; |
| color: var(--embed-danger); |
| } |
|
|
| .embed-thread { |
| @apply min-h-0 flex-1 space-y-5 overflow-y-auto overscroll-contain px-0 pt-10; |
| margin-right: -1.5rem; |
| padding-right: 1.5rem; |
| padding-bottom: 11rem; |
| } |
|
|
| .embed-message { |
| @apply flex w-full items-start gap-3; |
| } |
|
|
| .embed-message--assistant { |
| @apply justify-start; |
| } |
|
|
| .embed-message--user { |
| @apply justify-end; |
| } |
|
|
| .embed-message-avatar { |
| @apply flex size-8 shrink-0 items-center justify-center rounded-[9px]; |
| } |
|
|
| .embed-message-avatar--assistant { |
| background-color: var(--embed-primary); |
| color: #ffffff; |
| } |
|
|
| .embed-message-avatar--user { |
| background-color: var(--embed-primary-soft); |
| color: var(--embed-primary); |
| } |
|
|
| .embed-message-bubble { |
| @apply max-w-[min(290px,75%)] rounded-[10px] border px-4 py-3 text-sm shadow-none; |
| background-color: var(--embed-surface); |
| border-color: var(--embed-border); |
| color: var(--embed-text); |
| } |
|
|
| .embed-message--assistant .embed-message-bubble { |
| color: var(--embed-text); |
| } |
|
|
| .embed-message--user .embed-message-bubble { |
| background-color: var(--embed-primary); |
| border-color: var(--embed-primary); |
| color: #ffffff; |
| } |
|
|
| .embed-message-content { |
| @apply leading-relaxed whitespace-pre-wrap; |
| } |
|
|
| .embed-message-time { |
| @apply mt-2 block text-xs; |
| color: color-mix(in oklab, currentColor 68%, transparent); |
| } |
|
|
| .embed-message-caret { |
| @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px]; |
| background-color: currentColor; |
| } |
|
|
| .embed-message-bubble--typing { |
| color: var(--embed-muted); |
| } |
|
|
| .embed-composer-dock { |
| @apply absolute right-0 bottom-0 left-0 z-10; |
| } |
|
|
| .embed-composer { |
| @apply relative w-full rounded-[var(--embed-radius)] border px-4 py-3; |
| -webkit-backdrop-filter: blur(16px) saturate(1.25); |
| backdrop-filter: blur(16px) saturate(1.25); |
| background-color: color-mix( |
| in oklab, |
| var(--embed-surface) 82%, |
| transparent |
| ); |
| border-color: var(--embed-border); |
| box-shadow: 0 18px 40px color-mix(in oklab, var(--embed-primary) 24%, transparent); |
| } |
|
|
| .embed-course-row { |
| @apply flex flex-wrap items-center gap-2 text-sm font-bold; |
| color: var(--embed-text); |
| } |
|
|
| .embed-course-row svg, |
| .embed-question-row svg { |
| color: var(--embed-primary); |
| } |
|
|
| .embed-course-row select { |
| @apply h-6 max-w-[210px] rounded-[5px] border px-2 text-xs outline-none; |
| background-color: var(--embed-surface); |
| border-color: var(--embed-border); |
| color: var(--embed-text); |
| } |
|
|
| .embed-course-row select:disabled { |
| @apply opacity-70; |
| } |
|
|
| .embed-composer-divider { |
| @apply my-3 h-px w-full; |
| background-color: color-mix( |
| in oklab, |
| var(--embed-muted) 24%, |
| transparent |
| ); |
| } |
|
|
| .embed-question-row { |
| @apply flex items-start gap-3; |
| } |
|
|
| .embed-question-row textarea { |
| @apply min-h-[72px] flex-1 resize-none bg-transparent text-sm outline-none; |
| color: var(--embed-text); |
| } |
|
|
| .embed-question-row textarea::placeholder { |
| color: color-mix(in oklab, var(--embed-muted) 48%, transparent); |
| } |
|
|
| .embed-send-button { |
| @apply absolute right-4 bottom-3 flex size-8 items-center justify-center rounded-[8px] transition disabled:opacity-55; |
| background-color: var(--embed-primary); |
| color: #ffffff; |
| } |
|
|
| .embed-updated-at { |
| @apply mt-2 text-center text-xs; |
| color: var(--embed-muted); |
| } |
|
|
| .embed-history { |
| @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain pt-7; |
| margin-right: -1.5rem; |
| padding-right: 1.5rem; |
| } |
|
|
| .embed-history-item { |
| @apply flex w-full items-center justify-between gap-4 rounded-[7px] px-6 py-3 text-left transition; |
| color: var(--embed-text); |
| } |
|
|
| .embed-history-item[data-active='true'], |
| .embed-history-item:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--embed-muted) 18%, |
| transparent |
| ); |
| } |
|
|
|
|
| .embed-history-item strong { |
| @apply block text-base font-semibold; |
| } |
|
|
| .embed-history-item small { |
| @apply mt-1 block text-xs; |
| color: var(--embed-text); |
| } |
|
|
| .embed-history-delete { |
| @apply shrink-0 opacity-30 transition; |
| color: var(--embed-danger); |
| } |
|
|
| .embed-history-item[data-active='true'] .embed-history-delete, |
| .embed-history-item:hover .embed-history-delete { |
| @apply opacity-100; |
| } |
|
|
| .embed-empty-copy { |
| @apply mt-16 text-center text-sm; |
| color: var(--embed-muted); |
| } |
|
|
| .embed-modal-backdrop { |
| @apply absolute inset-0 z-50 flex items-center justify-center p-6; |
| background-color: color-mix(in oklab, var(--embed-text) 30%, transparent); |
| } |
|
|
| .embed-modal { |
| @apply w-full max-w-xs rounded-2xl p-5 shadow-xl; |
| background-color: var(--embed-surface); |
| color: var(--embed-text); |
| } |
|
|
| .embed-modal-title { |
| @apply mb-1 text-sm font-semibold; |
| } |
|
|
| .embed-modal-body { |
| @apply mb-4 text-sm; |
| color: var(--embed-muted); |
| } |
|
|
| .embed-modal-actions { |
| @apply flex justify-end gap-2; |
| } |
|
|
| .embed-modal-btn { |
| @apply rounded-full px-4 py-1.5 text-xs font-medium transition; |
| } |
|
|
| .embed-modal-btn--cancel { |
| background-color: color-mix(in oklab, var(--embed-muted) 15%, transparent); |
| color: var(--embed-text); |
| } |
|
|
| .embed-modal-btn--cancel:hover { |
| background-color: color-mix(in oklab, var(--embed-muted) 25%, transparent); |
| } |
|
|
| .embed-modal-btn--danger { |
| background-color: var(--embed-danger); |
| color: #fff; |
| } |
|
|
| .embed-modal-btn--danger:hover { |
| opacity: 0.88; |
| } |
|
|
| .lecturer-dashboard-shell { |
| @apply min-h-svh; |
| background-color: var(--lecturer-bg); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-sidebar { |
| border-color: var(--lecturer-border) !important; |
| } |
|
|
| .lecturer-sidebar [data-sidebar='sidebar'] { |
| background-color: var(--lecturer-sidebar-bg); |
| border-color: var(--lecturer-border); |
| box-shadow: var(--lecturer-sidebar-shadow); |
| } |
|
|
| .lecturer-sidebar-header { |
| @apply border-b; |
| border-color: var(--lecturer-border); |
| display: flex !important; |
| height: 72px !important; |
| flex-direction: row !important; |
| align-items: center !important; |
| justify-content: space-between !important; |
| gap: 0 !important; |
| padding: 0 20px !important; |
| } |
|
|
| .lecturer-brand { |
| @apply flex min-w-0 items-center gap-3 rounded-[10px] text-left outline-none focus-visible:ring-2; |
| color: var(--lecturer-text); |
| flex: 1 1 auto; |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 45%, |
| transparent |
| ); |
| } |
|
|
| .lecturer-brand-mark { |
| @apply flex size-8 shrink-0 items-center justify-center rounded-[8px]; |
| background-color: var(--lecturer-primary); |
| color: var(--lecturer-primary-foreground); |
| } |
|
|
| .lecturer-brand-copy { |
| @apply truncate text-base font-bold; |
| } |
|
|
| .lecturer-sidebar-trigger { |
| @apply rounded-[8px] shadow-none; |
| color: var(--lecturer-text); |
| width: 32px !important; |
| height: 32px !important; |
| } |
|
|
| .lecturer-sidebar-trigger:hover { |
| background-color: var(--lecturer-surface-soft); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-sidebar-content { |
| gap: 0 !important; |
| } |
|
|
| .lecturer-nav-group { |
| padding: 16px 20px !important; |
| } |
|
|
| .lecturer-nav-list { |
| gap: 8px !important; |
| } |
|
|
| .lecturer-nav-button { |
| @apply justify-start gap-2 rounded-[8px] text-xs font-semibold shadow-none; |
| color: var(--lecturer-muted); |
| height: 34px !important; |
| padding: 0 10px !important; |
| } |
|
|
| .lecturer-nav-button:hover { |
| background-color: var(--lecturer-primary-soft); |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-nav-button[data-active='true'] { |
| background-color: var(--lecturer-primary); |
| color: var(--lecturer-primary-foreground); |
| } |
|
|
| .lecturer-sidebar-footer { |
| @apply mt-auto border-t; |
| border-color: var(--lecturer-border); |
| padding: 16px 20px !important; |
| } |
|
|
| .lecturer-user-button { |
| @apply mb-3 w-fit gap-2 rounded-[6px] shadow-none cursor-default; |
| background-color: var(--lecturer-surface-soft); |
| color: var(--lecturer-text); |
| height: auto !important; |
| padding: 6px 8px !important; |
| } |
|
|
| .lecturer-user-button:hover { |
| background-color: var(--lecturer-surface-soft); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-user-avatar { |
| @apply size-6 text-[8px]; |
| background-color: var(--lecturer-surface); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-user-copy { |
| @apply min-w-0; |
| } |
|
|
| .lecturer-user-name { |
| @apply block truncate text-[11px] leading-tight font-semibold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-user-role { |
| @apply block truncate text-[10px] leading-tight; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-logout-button { |
| @apply justify-start gap-1 rounded-none text-[11px] font-normal shadow-none; |
| color: var(--lecturer-danger); |
| height: auto !important; |
| padding: 10px 16px !important; |
| } |
|
|
| .lecturer-logout-button:hover { |
| background-color: transparent; |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-confirm-dialog { |
| @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px]; |
| background-color: var(--lecturer-surface); |
| border-color: var(--lecturer-border); |
| box-shadow: var(--lecturer-shadow); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-confirm-dialog-footer { |
| @apply gap-3 pt-1; |
| } |
|
|
| .lecturer-danger-button { |
| @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none; |
| background-color: var(--lecturer-danger) !important; |
| color: var(--lecturer-primary-foreground) !important; |
| } |
|
|
| .lecturer-danger-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 86%, |
| #000 |
| ) !important; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-sidebar-header { |
| justify-content: center !important; |
| padding: 0 !important; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-brand-copy, |
| .group[data-collapsible='icon'] .lecturer-nav-button span, |
| .group[data-collapsible='icon'] .lecturer-user-copy, |
| .group[data-collapsible='icon'] .lecturer-logout-button span { |
| @apply hidden; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-brand { |
| flex: 0 0 auto; |
| justify-content: center; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-sidebar-trigger { |
| display: none !important; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-nav-group { |
| padding: 20px 12px !important; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-nav-button, |
| .group[data-collapsible='icon'] .lecturer-user-button, |
| .group[data-collapsible='icon'] .lecturer-logout-button { |
| @apply mx-auto flex items-center justify-center rounded-[9px]; |
| width: 32px !important; |
| height: 32px !important; |
| padding: 0 !important; |
| } |
|
|
| .group[data-collapsible='icon'] .lecturer-sidebar-footer { |
| @apply px-3; |
| } |
|
|
| .lecturer-workspace { |
| @apply flex min-w-0 flex-1 flex-col; |
| background-color: var(--lecturer-bg); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-page { |
| @apply w-full px-5 py-8 sm:px-8 lg:px-10; |
| } |
|
|
| .lecturer-page input:not([type='checkbox']), |
| .lecturer-page textarea, |
| .lecturer-page select { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 10%, |
| var(--lecturer-surface) |
| ) !important; |
| } |
|
|
| .lecturer-page-header { |
| @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between; |
| } |
|
|
| .lecturer-page-header h1 { |
| @apply text-3xl leading-tight font-bold tracking-[-0.03em]; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-page-header p { |
| @apply mt-1 text-sm leading-relaxed; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-header-actions { |
| @apply flex items-center gap-3; |
| } |
|
|
| .lecturer-theme-toggle { |
| @apply static size-9 rounded-[9px] shadow-none sm:static; |
| background-color: var(--lecturer-surface) !important; |
| border-color: var(--lecturer-border-strong) !important; |
| color: var(--lecturer-primary) !important; |
| } |
|
|
| .lecturer-create-button { |
| @apply h-9 rounded-[8px] px-4 text-xs font-semibold shadow-none; |
| background-color: var(--lecturer-primary) !important; |
| color: var(--lecturer-primary-foreground) !important; |
| } |
|
|
| .lecturer-cancel-button { |
| @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none; |
| background-color: var(--lecturer-surface) !important; |
| border-color: var(--lecturer-border) !important; |
| color: var(--lecturer-text) !important; |
| } |
|
|
| .lecturer-cancel-button:hover { |
| background-color: var(--lecturer-surface-soft) !important; |
| } |
|
|
| .lecturer-course-dialog { |
| @apply gap-6 rounded-[16px] border p-6 shadow-none sm:max-w-[460px]; |
| background-color: var(--lecturer-surface); |
| border-color: var(--lecturer-border-strong); |
| box-shadow: var(--lecturer-shadow); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-course-form { |
| @apply flex flex-col gap-5; |
| } |
|
|
| .lecturer-form-field { |
| @apply flex flex-col gap-2; |
| } |
|
|
| .lecturer-form-label { |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-form-input, |
| .lecturer-form-textarea { |
| @apply w-full rounded-[8px] border px-4 text-sm shadow-none transition-[border-color,box-shadow] outline-none; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 6%, |
| var(--lecturer-surface) |
| ); |
| border-color: var(--lecturer-border); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-form-input { |
| @apply h-11; |
| } |
|
|
| .lecturer-form-textarea { |
| @apply min-h-28 resize-none py-3; |
| } |
|
|
| .lecturer-form-input::placeholder, |
| .lecturer-form-textarea::placeholder { |
| color: var(--app-placeholder); |
| } |
|
|
| .lecturer-form-input:focus, |
| .lecturer-form-textarea:focus { |
| border-color: var(--lecturer-primary); |
| box-shadow: 0 0 0 3px |
| color-mix(in oklab, var(--lecturer-primary) 18%, transparent); |
| } |
|
|
| .lecturer-course-form .lecturer-status { |
| @apply mx-0 mt-0; |
| } |
|
|
| .lecturer-course-footer { |
| @apply gap-3 pt-1; |
| } |
|
|
| .lecturer-metric-grid { |
| @apply mt-8 grid grid-cols-1 gap-5 md:grid-cols-3; |
| } |
|
|
| .lecturer-metric-card { |
| @apply gap-0 rounded-[14px] border py-0 shadow-none; |
| background-color: var(--lecturer-surface); |
| border-color: var(--lecturer-border-soft); |
| box-shadow: var(--lecturer-shadow); |
| } |
|
|
| .lecturer-metric-content { |
| @apply flex items-center gap-5 px-6 py-6; |
| } |
|
|
| .lecturer-metric-icon { |
| @apply flex size-12 shrink-0 items-center justify-center rounded-[12px]; |
| background-color: var(--lecturer-primary-soft); |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-metric-icon[data-tone='danger'] { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 12%, |
| var(--lecturer-surface) |
| ); |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-metric-copy p { |
| @apply text-sm; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-metric-value-row { |
| @apply mt-1 flex items-end gap-2; |
| } |
|
|
| .lecturer-metric-value-row strong { |
| @apply text-3xl leading-none font-bold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-metric-icon[data-tone='danger'] |
| + .lecturer-metric-copy |
| .lecturer-metric-value-row |
| strong { |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-metric-value-row span { |
| @apply pb-1 text-xs; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-table-card { |
| @apply mt-8 gap-0 overflow-hidden rounded-[14px] border py-0 shadow-none; |
| background-color: var(--lecturer-surface); |
| border-color: var(--lecturer-border); |
| box-shadow: var(--lecturer-shadow); |
| } |
|
|
| .lecturer-table-content { |
| @apply px-0; |
| } |
|
|
| .lecturer-table-heading { |
| @apply flex flex-col gap-4 border-b px-6 py-5 sm:flex-row sm:items-center sm:justify-between; |
| border-color: var(--lecturer-border); |
| } |
|
|
| .lecturer-table-heading h2 { |
| @apply text-base font-semibold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-search-field { |
| @apply relative w-full sm:max-w-[320px]; |
| } |
|
|
| .lecturer-search-field svg { |
| @apply pointer-events-none absolute top-1/2 left-3 -translate-y-1/2; |
| color: var(--lecturer-muted); |
| z-index: 1; |
| } |
|
|
| .lecturer-search-input { |
| @apply h-10 rounded-[9px] border text-sm shadow-none transition-[border-color,box-shadow] outline-none; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 5%, |
| var(--lecturer-surface) |
| ); |
| border-color: var(--lecturer-border); |
| color: var(--lecturer-text); |
| padding-right: 0.75rem !important; |
| padding-left: 2.5rem !important; |
| } |
|
|
| .lecturer-search-input::placeholder { |
| color: var(--app-placeholder); |
| } |
|
|
| .lecturer-search-input:focus { |
| border-color: var(--lecturer-primary); |
| box-shadow: 0 0 0 3px |
| color-mix(in oklab, var(--lecturer-primary) 16%, transparent); |
| } |
|
|
| .lecturer-status { |
| @apply mx-6 mt-4 rounded-[10px] border px-4 py-3 text-sm font-medium; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 8%, |
| var(--lecturer-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 24%, |
| transparent |
| ); |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-status--success { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-success) 8%, |
| var(--lecturer-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--lecturer-success) 24%, |
| transparent |
| ); |
| color: var(--lecturer-success); |
| } |
|
|
| .lecturer-table-wrap { |
| @apply w-full overflow-x-auto; |
| } |
|
|
| .lecturer-table { |
| @apply w-full min-w-[620px] border-collapse text-left; |
| } |
|
|
| .lecturer-table th { |
| @apply px-6 py-4 text-xs font-semibold; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-table td { |
| @apply border-t px-6 py-4 text-sm; |
| border-color: var(--lecturer-border); |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-table tbody tr:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 5%, |
| transparent |
| ); |
| } |
|
|
| .lecturer-kb-name { |
| @apply block max-w-[260px] font-semibold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-doc-pill { |
| @apply inline-flex items-center gap-1.5 rounded-[7px] px-2.5 py-1 text-xs font-semibold; |
| background-color: var(--lecturer-surface-soft); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-doc-pill svg { |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-doc-error { |
| @apply size-1.5 rounded-full; |
| background-color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-table-empty { |
| @apply py-10 text-center text-sm; |
| color: var(--lecturer-muted) !important; |
| } |
|
|
| .lecturer-manage-button { |
| @apply inline-flex items-center justify-center gap-1 rounded-[7px] px-3 py-1.5 text-sm font-semibold transition-colors outline-none focus-visible:ring-2; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 10%, |
| var(--lecturer-surface) |
| ); |
| color: var(--lecturer-primary); |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 45%, |
| transparent |
| ); |
| } |
|
|
| .lecturer-manage-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 16%, |
| var(--lecturer-surface) |
| ); |
| } |
|
|
| .lecturer-detail-page { |
| @apply min-h-svh w-full; |
| background-color: var(--lecturer-bg); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-detail-header { |
| @apply flex flex-col gap-5 px-5 py-8 sm:flex-row sm:items-start sm:px-8 lg:px-10; |
| background-color: var(--lecturer-surface-soft); |
| border-bottom: 1px solid var(--lecturer-border-soft); |
| } |
|
|
| .lecturer-detail-back { |
| @apply mt-1 inline-flex size-9 shrink-0 items-center justify-center rounded-full transition-colors outline-none focus-visible:ring-2; |
| color: var(--lecturer-muted); |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 45%, |
| transparent |
| ); |
| } |
|
|
| .lecturer-detail-back:hover { |
| background-color: var(--lecturer-surface); |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-detail-heading { |
| @apply min-w-0 flex-1; |
| } |
|
|
| .lecturer-detail-title-row { |
| @apply flex flex-wrap items-center gap-4; |
| } |
|
|
| .lecturer-detail-title-row h1 { |
| @apply text-3xl leading-tight font-bold tracking-[-0.03em]; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-detail-heading p { |
| @apply mt-1 text-base leading-relaxed italic; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-detail-actions { |
| @apply flex items-center gap-3 sm:ml-auto; |
| } |
|
|
| .lecturer-edit-button { |
| @apply h-12 rounded-[8px] px-5 text-base font-semibold shadow-none; |
| background-color: var(--lecturer-surface) !important; |
| border-color: var(--lecturer-border) !important; |
| color: var(--lecturer-text) !important; |
| } |
|
|
| .lecturer-edit-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 8%, |
| var(--lecturer-surface) |
| ) !important; |
| } |
|
|
| .lecturer-delete-button { |
| @apply size-12 rounded-[8px] shadow-none; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 10%, |
| var(--lecturer-surface) |
| ) !important; |
| color: var(--lecturer-danger) !important; |
| } |
|
|
| .lecturer-delete-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 16%, |
| var(--lecturer-surface) |
| ) !important; |
| } |
|
|
| .lecturer-delete-copy { |
| @apply text-sm leading-relaxed; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-delete-copy strong { |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-danger-action-button { |
| @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none; |
| background-color: var(--lecturer-danger) !important; |
| color: var(--lecturer-primary-foreground) !important; |
| } |
|
|
| .lecturer-danger-action-button:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 86%, |
| #000 |
| ) !important; |
| } |
|
|
| .lecturer-detail-content { |
| @apply mx-auto flex w-full max-w-[920px] flex-col gap-6 px-5 py-10 sm:px-8; |
| } |
|
|
| .lecturer-upload-input { |
| @apply sr-only; |
| } |
|
|
| .lecturer-upload-card { |
| @apply flex min-h-[185px] w-full flex-col items-center justify-center gap-3 rounded-[14px] border border-dashed px-6 py-8 text-center transition-colors outline-none focus-visible:ring-2; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 6%, |
| var(--lecturer-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 28%, |
| var(--lecturer-border) |
| ); |
| color: var(--lecturer-text); |
| --tw-ring-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 45%, |
| transparent |
| ); |
| } |
|
|
| .lecturer-upload-card:hover { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 10%, |
| var(--lecturer-surface) |
| ); |
| border-color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-upload-card[data-uploading='true'] { |
| opacity: 0.78; |
| } |
|
|
| .lecturer-upload-icon { |
| @apply flex size-12 items-center justify-center rounded-full; |
| background-color: var(--lecturer-surface); |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-upload-title { |
| @apply text-base font-medium; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-upload-description { |
| @apply max-w-[560px] text-sm leading-relaxed; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-document-section { |
| @apply mt-1; |
| } |
|
|
| .lecturer-document-heading { |
| @apply flex items-center gap-2 text-sm font-bold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-document-list { |
| @apply mt-5 flex flex-col gap-3; |
| } |
|
|
| .lecturer-document-card { |
| @apply relative gap-0 rounded-[10px] border py-0 shadow-none; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 3%, |
| var(--lecturer-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 18%, |
| var(--lecturer-border) |
| ); |
| } |
|
|
| .lecturer-document-card[data-status='failed'] { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 5%, |
| var(--lecturer-surface) |
| ); |
| border-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 25%, |
| var(--lecturer-border) |
| ); |
| } |
|
|
| .lecturer-document-content { |
| @apply flex items-start gap-4 px-5 py-5; |
| } |
|
|
| .lecturer-document-delete { |
| @apply absolute top-3 right-3 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive; |
|
|
| @media (hover: hover) { |
| @apply opacity-0; |
| } |
| } |
|
|
| @media (hover: hover) { |
| .lecturer-document-card:hover .lecturer-document-delete, |
| .lecturer-document-card:focus-within .lecturer-document-delete { |
| @apply opacity-100; |
| } |
| } |
|
|
| .lecturer-document-icon { |
| @apply flex size-10 shrink-0 items-center justify-center rounded-[8px]; |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-primary) 12%, |
| var(--lecturer-surface) |
| ); |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-document-icon[data-status='failed'] { |
| background-color: color-mix( |
| in oklab, |
| var(--lecturer-danger) 12%, |
| var(--lecturer-surface) |
| ); |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-document-copy { |
| @apply min-w-0 flex-1; |
| } |
|
|
| .lecturer-document-copy h3 { |
| @apply truncate text-sm font-bold; |
| color: var(--lecturer-text); |
| } |
|
|
| .lecturer-document-meta { |
| @apply mt-2 flex flex-wrap items-center gap-3 text-xs; |
| color: var(--lecturer-muted); |
| } |
|
|
| .lecturer-document-status { |
| @apply mt-3 flex items-center gap-1.5 text-xs font-semibold; |
| color: var(--lecturer-success); |
| } |
|
|
| .lecturer-document-status[data-status='failed'] { |
| color: var(--lecturer-danger); |
| } |
|
|
| .lecturer-document-status[data-status='processing'] { |
| color: var(--lecturer-primary); |
| } |
|
|
| .lecturer-detail-empty { |
| @apply rounded-[10px] border px-5 py-8 text-center text-sm; |
| background-color: var(--lecturer-surface); |
| border-color: var(--lecturer-border); |
| color: var(--lecturer-muted); |
| } |
|
|
| @media (max-width: 640px) { |
| .student-chat-stage--session { |
| @apply px-0; |
| } |
|
|
| .student-chat-thread { |
| @apply px-3; |
| padding-bottom: 11rem; |
| } |
|
|
| .student-chat-scroll-anchor { |
| scroll-margin-bottom: 12rem; |
| } |
|
|
| .student-message-bubble { |
| @apply max-w-[calc(100vw_-_7rem)]; |
| } |
|
|
| .student-chat-composer { |
| @apply right-3 bottom-4 left-3 pb-0; |
| } |
|
|
| .lecturer-page { |
| @apply px-4 py-6; |
| } |
|
|
| .lecturer-page-header h1 { |
| @apply text-2xl; |
| } |
|
|
| .lecturer-header-actions { |
| @apply w-full; |
| } |
|
|
| .lecturer-create-button { |
| @apply flex-1; |
| } |
|
|
| .lecturer-detail-title-row h1 { |
| @apply text-2xl; |
| } |
|
|
| .lecturer-detail-actions { |
| @apply w-full; |
| } |
|
|
| .lecturer-edit-button { |
| @apply flex-1; |
| } |
|
|
| .lecturer-detail-content { |
| @apply px-4 py-6; |
| } |
|
|
| .lecturer-document-content { |
| @apply flex-col; |
| } |
| } |
| } |
|
|
| .lecturer-dashboard-shell { |
| --primary: var(--lecturer-primary); |
| --primary-foreground: var(--lecturer-primary-foreground); |
| --ring: color-mix(in oklab, var(--lecturer-primary) 40%, transparent); |
| } |
|
|
| |
| .error-shell { |
| @apply relative flex min-h-screen items-center justify-center bg-background px-4; |
| } |
|
|
| .error-toggle { |
| @apply absolute top-4 right-4; |
| } |
|
|
| .error-content { |
| @apply flex flex-col items-center gap-4 text-center max-w-sm w-full; |
| } |
|
|
| .error-icon { |
| @apply flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground; |
| } |
|
|
| .error-code { |
| @apply text-6xl font-bold text-muted-foreground; |
| } |
|
|
| .error-title { |
| @apply text-2xl font-semibold text-foreground; |
| } |
|
|
| .error-description { |
| @apply text-sm text-muted-foreground; |
| } |
|
|
| |
| .student-message-markdown { |
| @apply text-sm leading-relaxed; |
| } |
|
|
| .student-message-markdown p { |
| @apply mb-2 last:mb-0; |
| } |
|
|
| .student-message-markdown strong, |
| .student-message-markdown b { |
| @apply font-semibold; |
| } |
|
|
| .student-message-markdown em, |
| .student-message-markdown i { |
| @apply italic; |
| } |
|
|
| .student-message-markdown ul { |
| @apply mb-2 list-disc pl-5; |
| } |
|
|
| .student-message-markdown ol { |
| @apply mb-2 list-decimal pl-5; |
| } |
|
|
| .student-message-markdown li { |
| @apply mb-0.5; |
| } |
|
|
| .student-message-markdown code { |
| @apply rounded bg-muted px-1 py-0.5 font-mono text-xs; |
| } |
|
|
| .student-message-markdown pre { |
| @apply mb-2 overflow-x-auto rounded-md bg-muted p-3; |
| } |
|
|
| .student-message-markdown pre code { |
| @apply bg-transparent p-0; |
| } |
|
|
| .student-message-markdown h1, |
| .student-message-markdown h2, |
| .student-message-markdown h3 { |
| @apply mb-1 font-semibold; |
| } |
|
|
| .student-message-markdown blockquote { |
| @apply border-l-2 border-muted-foreground pl-3 italic text-muted-foreground; |
| } |
|
|
