wehub-resource-sync
571 lines
19 KiB
CSS
571 lines
19 KiB
CSS
@import 'tailwindcss';
|
||
@import 'tw-animate-css';
|
||
@import 'shadcn/tailwind.css';
|
||
|
||
/* Streamdown (AI sidebar markdown) styles itself with Tailwind utilities —
|
||
Tailwind must scan its dist so those classes get generated. */
|
||
@source '../node_modules/streamdown/dist/*.js';
|
||
@source '../node_modules/@streamdown/code/dist/*.js';
|
||
@source "../node_modules/@openmaic/renderer/dist/**/*.{js,cjs}";
|
||
/* slide-renderer-demo is gitignored (local sandbox), which makes Tailwind v4's
|
||
auto source detection skip it. Re-include it explicitly so the demo's
|
||
Tailwind classes (e.g. bg-violet-600) still get generated. */
|
||
@source "./slide-renderer-demo/**/*.{tsx,ts,jsx,js}";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--font-sans: var(--font-sans);
|
||
--font-mono: var(--font-geist-mono);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-ring: var(--ring);
|
||
--color-input: var(--input);
|
||
--color-border: var(--border);
|
||
--color-destructive: var(--destructive);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-card: var(--card);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--radius-2xl: calc(var(--radius) + 8px);
|
||
--radius-3xl: calc(var(--radius) + 12px);
|
||
--radius-4xl: calc(var(--radius) + 16px);
|
||
}
|
||
|
||
: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: #722ed1;
|
||
--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.58 0.22 27);
|
||
--border: oklch(0.922 0 0);
|
||
--input: oklch(0.922 0 0);
|
||
--ring: oklch(0.708 0 0);
|
||
--chart-1: oklch(0.809 0.105 251.813);
|
||
--chart-2: oklch(0.623 0.214 259.815);
|
||
--chart-3: oklch(0.546 0.245 262.881);
|
||
--chart-4: oklch(0.488 0.243 264.376);
|
||
--chart-5: oklch(0.424 0.199 265.638);
|
||
--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.708 0 0);
|
||
}
|
||
|
||
.dark {
|
||
--background: oklch(0.145 0 0);
|
||
--foreground: oklch(0.985 0 0);
|
||
--card: oklch(0.205 0 0);
|
||
--card-foreground: oklch(0.985 0 0);
|
||
--popover: oklch(0.205 0 0);
|
||
--popover-foreground: oklch(0.985 0 0);
|
||
--primary: #8b47ea;
|
||
--primary-foreground: oklch(0.205 0 0);
|
||
--secondary: oklch(0.269 0 0);
|
||
--secondary-foreground: oklch(0.985 0 0);
|
||
--muted: oklch(0.269 0 0);
|
||
--muted-foreground: oklch(0.708 0 0);
|
||
--accent: oklch(0.371 0 0);
|
||
--accent-foreground: oklch(0.985 0 0);
|
||
--destructive: oklch(0.704 0.191 22.216);
|
||
--border: oklch(1 0 0 / 10%);
|
||
--input: oklch(1 0 0 / 15%);
|
||
--ring: oklch(0.556 0 0);
|
||
--chart-1: oklch(0.809 0.105 251.813);
|
||
--chart-2: oklch(0.623 0.214 259.815);
|
||
--chart-3: oklch(0.546 0.245 262.881);
|
||
--chart-4: oklch(0.488 0.243 264.376);
|
||
--chart-5: oklch(0.424 0.199 265.638);
|
||
--sidebar: oklch(0.205 0 0);
|
||
--sidebar-foreground: oklch(0.985 0 0);
|
||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||
--sidebar-accent: oklch(0.269 0 0);
|
||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||
--sidebar-border: oklch(1 0 0 / 10%);
|
||
--sidebar-ring: oklch(0.556 0 0);
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
html {
|
||
/* Always render the vertical scrollbar so layout doesn't horizontally
|
||
shift when content grows/shrinks across the viewport-height threshold
|
||
(e.g. expanding/collapsing recent classrooms). scrollbar-gutter:
|
||
stable doesn't cover every browser/config combo we see, so fall back
|
||
to forcing overflow-y: scroll as well. */
|
||
scrollbar-gutter: stable;
|
||
overflow-y: scroll;
|
||
}
|
||
body {
|
||
@apply bg-background text-foreground;
|
||
}
|
||
/* Radix modal overlays wrap with `react-remove-scroll`, which compensates
|
||
for the removed page scrollbar by adding right-side body spacing. This
|
||
app already reserves the scrollbar gutter on <html> (above), so that
|
||
extra compensation creates a visible horizontal layout shift when opening
|
||
Settings on the homepage/classroom shells. Keep Radix's modal focus and
|
||
interaction locking, but neutralize only the redundant gap compensation. */
|
||
body[data-maic-editor='true'],
|
||
body[data-scroll-locked] {
|
||
padding-right: 0 !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
}
|
||
/* ProseMirror Editor Styles */
|
||
.prosemirror-editor {
|
||
cursor: text;
|
||
}
|
||
|
||
/* The slide editor draws a text element's frame via the renderer's Operate
|
||
layer. The focused contenteditable must not also paint a UA focus ring on
|
||
top of it (the base `* { @apply outline-ring/50 }` rule gives every focused
|
||
element an outline). `.prosemirror-editor` is an editor-only class —
|
||
playback's BaseTextElement never carries it, so playback is unaffected. */
|
||
.prosemirror-editor :focus,
|
||
.prosemirror-editor :focus-visible {
|
||
outline: none;
|
||
}
|
||
|
||
/* Tailwind's preflight resets `list-style: none` and `padding: 0` on
|
||
`<ul>`/`<ol>`. The text element's `bulletList` / `orderedList` commands
|
||
genuinely wrap content in `<ul><li>` / `<ol><li>`, but without those
|
||
resets undone no marker would be visible. `!important` defeats any
|
||
layered preflight specificity we'd otherwise have to chase.
|
||
|
||
`.editable-element-text` is the PLAYBACK text wrapper, rendered for every
|
||
classroom/playback user — not just in the editor. So its rules MUST be
|
||
scoped to editor mode (`body[data-maic-editor='true']`, set by
|
||
EditChromeRoot while Pro mode is mounted) to keep flag-off playback
|
||
rendering byte-unchanged: the editor surface isn't GA yet, so playback
|
||
display of editor-authored lists is deferred. Scoping keeps list markers
|
||
visible while editing (the user needs to see their bullets) without
|
||
altering how the same wrapper renders during normal playback for all
|
||
users. `.prosemirror-editor` is an editor-only class already (playback's
|
||
BaseTextElement never carries it), so it stays unscoped. */
|
||
body[data-maic-editor='true'] .editable-element-text ul,
|
||
.prosemirror-editor ul {
|
||
list-style: disc outside !important;
|
||
padding-inline-start: 1.5rem !important;
|
||
}
|
||
body[data-maic-editor='true'] .editable-element-text ol,
|
||
.prosemirror-editor ol {
|
||
list-style: decimal outside !important;
|
||
padding-inline-start: 1.5rem !important;
|
||
}
|
||
body[data-maic-editor='true'] .editable-element-text li,
|
||
.prosemirror-editor li {
|
||
display: list-item !important;
|
||
}
|
||
|
||
/* Compact react-colorful for the slide editor's color popover. Defaults are
|
||
a 200×200 square with a thick separator — we squeeze it tight + round it
|
||
so the popover feels intentional, not stock. */
|
||
.color-picker .react-colorful {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.color-picker .react-colorful__saturation {
|
||
height: 128px;
|
||
border-radius: 6px;
|
||
border-bottom: none;
|
||
}
|
||
.color-picker .react-colorful__hue {
|
||
height: 10px;
|
||
margin-top: 10px;
|
||
border-radius: 999px;
|
||
}
|
||
.color-picker .react-colorful__pointer {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-width: 2px;
|
||
}
|
||
|
||
.prosemirror-editor.format-painter {
|
||
cursor:
|
||
url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMzUuMDEybC0uMDY2Ljk5OGE1LjI3MSA1LjI3MSAwIDAwLTEuMTg0LjA2IDMuOCAzLjggMCAwMC0uOTMzLjQ3MmMtLjQ0LjM1Ni0uNzgzLjgxMS0uOTk4IDEuMzI0bC4wMTgtLjAzNnY1LjEySDEuMDR2Ljk4aC0xLjA0bC0uMDAyIDQuMTVjLjE4Ny40MjYuNDYuODEuNzkxIDEuMTE3bC4xNzUuMTUyYy4yOTMuMjA4LjYxNS4zNzMuODkuNDcyLjQxLjA4Mi44My4xMTIgMS4yNDkuMDlsLjA1Ny45OTlhNi4wNjMgNi4wNjMgMCAwMS0xLjU4OC0uMTI5IDQuODM2IDQuODM2IDAgMDEtMS4yNS0uNjQ3IDQuNDYzIDQuNDYzIDAgMDEtLjgzOC0uODgzYy0uMjI0LjMzMi0uNS42NDItLjgyNC45MjdhNC4xMSA0LjExIDAgMDEtMS4zMDUuNjMzQTYuMTI2IDYuMTI2IDAgMDEwIDE1LjkwOWwuMDY4LS45OTdjLjQyNC4wMjYuODUtLjAwMSAxLjIxNy0uMDcuMzM2LS4wOTkuNjUxLS4yNTQuODk0LS40My40My0uMzguNzY1LS44NDcuOTgyLTEuMzY4bC0uMDA1LjAxNFY4LjkzSDIuMTE1di0uOThoMS4wNFYyLjg2MmEzLjc3IDMuNzcgMCAwMC0uNzc0LTEuMTY3bC0uMTY1LS4xNTZhMy4wNjQgMy4wNjQgMCAwMC0uODgtLjQ0OEE1LjA2MiA1LjA2MiAwIDAwLjA2NyAxLjAxTDAgLjAxMmE2LjE0IDYuMTQgMCAwMTEuNTkyLjExYy40NTMuMTM1Ljg3Ny4zNDUgMS4yOS42NS4zLjI2NS41NjUuNTY0Ljc4Ny44OS4yMzMtLjMzMS41Mi0uNjM0Ljg1My0uOTA0YTQuODM1IDQuODM1IDAgMDExLjMtLjY0OEE2LjE1NSA2LjE1NSAwIDAxNy4zNS4wMTJ6IiBmaWxsPSIjMEQwRDBEIi8+PHBhdGggZD0iTTE3LjM1IDE0LjVsNC41LTQuNS02LTZjLTIgMi0zIDItNS41IDIuNS40IDMuMiA0LjgzMyA2LjY2NyA3IDh6bTQuNTg4LTQuNDkzYS4zLjMgMCAwMC40MjQgMGwuNjgtLjY4YTEuNSAxLjUgMCAwMDAtMi4xMjJMMjEuNjkgNS44NTNsMi4wMjUtMS41ODNhMS42MjkgMS42MjkgMCAxMC0yLjI3OS0yLjI5NmwtMS42MDMgMi4wMjItMS4zNTctMS4zNTdhMS41IDEuNSAwIDAwLTIuMTIxIDBsLS42OC42OGEuMy4zIDAgMDAwIC40MjVsNi4yNjMgNi4yNjN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE1Ljg5MiAzLjk2MnMtMS4wMyAxLjIwMi0yLjQ5NCAxLjg5Yy0xLjAwNi40NzQtMi4xOC41ODYtMi43MzQuNjI3LS4yLjAxNS0uMzQ0LjIxLS4yNzYuMzk5LjI5Mi44MiAxLjExMiAyLjggMi42NTggNC4zNDYgMi4xMjYgMi4xMjcgMy42NTggMi45NjggNC4xNDIgMy4yMDMuMS4wNDguMjE0LjAzLjI5OC0uMDQyLjM4Ni0uMzI1IDEuNS0xLjI3NyAyLjIxLTEuOTg2Ljg5Mi0uODg5IDIuMTg3LTIuNDQ3IDIuMTg3LTIuNDQ3bS40NzkuMDU1YS4zLjMgMCAwMS0uNDI0IDBsLTYuMjY0LTYuMjYzYS4zLjMgMCAwMTAtLjQyNWwuNjgtLjY4YTEuNSAxLjUgMCAwMTIuMTIyIDBsMS4zNTcgMS4zNTcgMS42MDMtMi4wMjJhMS42MjkgMS42MjkgMCAxMTIuMjggMi4yOTZMMjEuNjkgNS44NTNsMS4zNTIgMS4zNTJhMS41IDEuNSAwIDAxMCAyLjEyMmwtLjY4LjY4eiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+')
|
||
2 5,
|
||
default !important;
|
||
}
|
||
|
||
/* Animation for audio visualizer */
|
||
@keyframes wave {
|
||
0%,
|
||
100% {
|
||
height: 30%;
|
||
}
|
||
50% {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* Breathing bars for presentation speech bubbles (parent is h-3.5 = 14px) */
|
||
@keyframes breathing-bar-1 {
|
||
0%,
|
||
100% {
|
||
height: 3px;
|
||
}
|
||
50% {
|
||
height: 14px;
|
||
}
|
||
}
|
||
@keyframes breathing-bar-2 {
|
||
0%,
|
||
100% {
|
||
height: 6px;
|
||
}
|
||
50% {
|
||
height: 14px;
|
||
}
|
||
}
|
||
@keyframes breathing-bar-3 {
|
||
0%,
|
||
100% {
|
||
height: 3px;
|
||
}
|
||
50% {
|
||
height: 11px;
|
||
}
|
||
}
|
||
|
||
/* Hide scrollbar by default, show on hover */
|
||
@utility scrollbar-hide {
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
/* PBL v2 workspace scrollbars: scoped so the rest of OpenMAIC keeps native behavior. */
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade {
|
||
scrollbar-color: rgb(224 231 255 / 0.44) transparent;
|
||
scrollbar-gutter: stable;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar::-webkit-scrollbar,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade::-webkit-scrollbar {
|
||
height: 10px;
|
||
width: 10px;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar::-webkit-scrollbar-track,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar::-webkit-scrollbar-corner,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar::-webkit-scrollbar-thumb,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade::-webkit-scrollbar-thumb {
|
||
background-color: rgb(224 231 255 / 0.38);
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgb(224 231 255 / 0.08) 0,
|
||
rgb(224 231 255 / 0.26) 15%,
|
||
rgb(199 210 254 / 0.5) 34%,
|
||
rgb(165 243 252 / 0.42) 52%,
|
||
rgb(199 210 254 / 0.5) 70%,
|
||
rgb(224 231 255 / 0.26) 86%,
|
||
rgb(224 231 255 / 0.08) 100%
|
||
)
|
||
content-box;
|
||
background-clip: content-box;
|
||
border: 3px solid transparent;
|
||
border-radius: 999px;
|
||
min-height: 48px;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgb(255 255 255 / 0.06),
|
||
0 0 12px rgb(125 211 252 / 0.16);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-scrollbar::-webkit-scrollbar-thumb:hover,
|
||
[data-pbl-workspace='true'] .pbl-v2-scroll-fade::-webkit-scrollbar-thumb:hover {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgb(224 231 255 / 0.12) 0,
|
||
rgb(224 231 255 / 0.34) 14%,
|
||
rgb(216 203 255 / 0.62) 32%,
|
||
rgb(165 243 252 / 0.5) 52%,
|
||
rgb(216 203 255 / 0.62) 70%,
|
||
rgb(224 231 255 / 0.34) 86%,
|
||
rgb(224 231 255 / 0.12) 100%
|
||
)
|
||
content-box;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown {
|
||
color: rgb(51 65 85);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown :where(p, li, blockquote) {
|
||
color: rgb(51 65 85);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown :where(strong, b) {
|
||
color: rgb(15 23 42);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown :where(code):not(pre code) {
|
||
background: rgb(226 232 240 / 0.9);
|
||
border: 1px solid rgb(148 163 184 / 0.28);
|
||
border-radius: 0.375rem;
|
||
color: rgb(30 41 59);
|
||
font-weight: 600;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown div[data-streamdown='code-block'] {
|
||
border-color: rgb(148 163 184 / 0.22);
|
||
box-shadow: 0 12px 24px rgb(15 23 42 / 0.16);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown div[data-streamdown='code-block-body'],
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown div[data-streamdown='code-block-body'] pre {
|
||
background: rgb(15 23 42) !important;
|
||
color: rgb(248 250 252) !important;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-light-card-markdown div[data-streamdown='code-block-body'] code,
|
||
[data-pbl-workspace='true']
|
||
.pbl-v2-light-card-markdown
|
||
div[data-streamdown='code-block-body']
|
||
span {
|
||
color: rgb(248 250 252) !important;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-markdown :where(code):not(pre code) {
|
||
background: rgb(255 255 255 / 0.34);
|
||
border: 1px solid rgb(165 180 252 / 0.34);
|
||
box-shadow:
|
||
inset 0 1px 0 rgb(255 255 255 / 0.35),
|
||
0 6px 14px rgb(51 65 85 / 0.1);
|
||
color: rgb(36 50 76);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-markdown :where(li)::marker {
|
||
color: rgb(99 102 241 / 0.65);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-instructor-bubble {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid rgb(147 197 253 / 0.2);
|
||
background:
|
||
radial-gradient(circle at 8% 0%, rgb(157 140 255 / 0.16), transparent 34%),
|
||
radial-gradient(circle at 96% 15%, rgb(34 211 238 / 0.1), transparent 30%),
|
||
linear-gradient(145deg, rgb(22 35 62 / 0.78), rgb(17 31 56 / 0.72) 58%, rgb(15 28 50 / 0.8));
|
||
box-shadow:
|
||
inset 0 1px 0 rgb(255 255 255 / 0.1),
|
||
inset 0 0 0 1px rgb(255 255 255 / 0.025),
|
||
0 18px 42px rgb(3 10 26 / 0.32),
|
||
0 0 34px rgb(96 165 250 / 0.08);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-instructor-bubble::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0 0 auto;
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgb(165 180 252 / 0.55),
|
||
rgb(103 232 249 / 0.34),
|
||
transparent
|
||
);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-instructor-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -48px;
|
||
top: -48px;
|
||
height: 120px;
|
||
width: 120px;
|
||
border-radius: 999px;
|
||
background: rgb(125 211 252 / 0.08);
|
||
filter: blur(20px);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-instructor-bubble > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-instructor-label {
|
||
color: rgb(165 180 252 / 0.82);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-shell {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid rgb(199 210 254 / 0.55);
|
||
background:
|
||
radial-gradient(circle at 12% 0%, rgb(167 139 250 / 0.26), transparent 34%),
|
||
radial-gradient(circle at 92% 12%, rgb(103 232 249 / 0.2), transparent 28%),
|
||
linear-gradient(
|
||
145deg,
|
||
rgb(245 243 255 / 0.7),
|
||
rgb(239 246 255 / 0.5) 54%,
|
||
rgb(236 254 255 / 0.56)
|
||
);
|
||
box-shadow:
|
||
inset 0 1px 0 rgb(255 255 255 / 0.65),
|
||
0 20px 54px rgb(3 10 26 / 0.3),
|
||
0 0 0 1px rgb(139 92 246 / 0.12),
|
||
0 0 42px rgb(99 102 241 / 0.14);
|
||
backdrop-filter: blur(20px) saturate(1.08);
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-shell::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
background:
|
||
linear-gradient(135deg, rgb(255 255 255 / 0.5), transparent 34%),
|
||
linear-gradient(90deg, rgb(167 139 250 / 0.72), rgb(103 232 249 / 0.42), transparent) top / 100%
|
||
1px no-repeat;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-shell > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
[data-pbl-workspace='true'] .pbl-v2-task-review-card {
|
||
border: 1px solid rgb(199 210 254 / 0.52);
|
||
background:
|
||
linear-gradient(
|
||
145deg,
|
||
rgb(255 255 255 / 0.48),
|
||
rgb(238 242 255 / 0.34),
|
||
rgb(236 254 255 / 0.3)
|
||
),
|
||
rgb(255 255 255 / 0.2);
|
||
box-shadow:
|
||
inset 0 1px 0 rgb(255 255 255 / 0.58),
|
||
0 16px 38px rgb(4 20 28 / 0.14),
|
||
0 0 30px rgb(129 140 248 / 0.12);
|
||
backdrop-filter: blur(12px) saturate(1.05);
|
||
}
|
||
|
||
/* Shimmer sweep for skeleton loading */
|
||
@keyframes shimmer {
|
||
0% {
|
||
transform: translateX(-100%);
|
||
}
|
||
100% {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
/* Breathing animation for interactive mode button */
|
||
@keyframes interactive-mode-breathe {
|
||
0%,
|
||
100% {
|
||
opacity: 0.3;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.7;
|
||
transform: scale(1.08);
|
||
}
|
||
}
|
||
|
||
/* PBL v2 — thinking dots pulse (wider swing for visibility on dark bg) */
|
||
@keyframes think-dot-pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.15;
|
||
}
|
||
}
|
||
|
||
/* Cursor-style "Thinking…" indicator: a bright band sweeps left→right across
|
||
muted text (gradient clipped to glyphs). Used by the AI sidebar while the
|
||
agent run streams and nothing has arrived yet. */
|
||
@keyframes ai-thinking-shimmer {
|
||
0% {
|
||
background-position: 150% 0;
|
||
}
|
||
100% {
|
||
background-position: -50% 0;
|
||
}
|
||
}
|
||
.ai-thinking-shimmer {
|
||
background: linear-gradient(
|
||
100deg,
|
||
var(--muted-foreground) 0%,
|
||
var(--muted-foreground) 40%,
|
||
var(--foreground) 50%,
|
||
var(--muted-foreground) 60%,
|
||
var(--muted-foreground) 100%
|
||
);
|
||
background-size: 200% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
animation: ai-thinking-shimmer 1.8s linear infinite;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ai-thinking-shimmer {
|
||
animation: none;
|
||
color: var(--muted-foreground);
|
||
-webkit-text-fill-color: var(--muted-foreground);
|
||
}
|
||
}
|