mirror of
https://github.com/getpaseo/paseo.git
synced 2026-07-29 12:01:31 +00:00
028839b3cb
Group the docs sidebar by directory so the new pages cluster under a heading, add a hamburger menu for the mobile docs nav, and let the docs main column shrink so wide code blocks and tables scroll inside instead of pushing the page wide.
591 lines
12 KiB
CSS
591 lines
12 KiB
CSS
@import "tailwindcss";
|
|
|
|
@keyframes voice-bar {
|
|
0% {
|
|
transform: scaleY(1);
|
|
}
|
|
100% {
|
|
transform: scaleY(0.3);
|
|
}
|
|
}
|
|
|
|
/* Title font - centralized for easy changes */
|
|
.font-title {
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Inline code styling - scoped to prose content */
|
|
.prose :not(pre) > code {
|
|
background-color: var(--color-muted);
|
|
color: var(--color-foreground);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
/* Markdown rendering styles for /changelog */
|
|
.changelog-markdown {
|
|
color: rgba(250, 250, 250, 0.82);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.changelog-markdown h1 {
|
|
color: var(--color-foreground);
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.changelog-markdown h2 {
|
|
color: var(--color-foreground);
|
|
font-size: 1.5rem;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.changelog-markdown h3 {
|
|
color: var(--color-foreground);
|
|
font-size: 1.125rem;
|
|
line-height: 1.4;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.changelog-markdown p {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.changelog-markdown ul {
|
|
list-style: disc;
|
|
margin-left: 1.25rem;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.changelog-markdown li {
|
|
padding-left: 0.125rem;
|
|
}
|
|
|
|
.changelog-markdown a {
|
|
color: var(--color-foreground);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.changelog-markdown a:hover {
|
|
color: rgba(250, 250, 250, 0.8);
|
|
}
|
|
|
|
/* Docs page prose styles — mirrors the original docs/*.tsx components */
|
|
.docs-prose {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.docs-prose > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.docs-prose h1,
|
|
.docs-prose h2,
|
|
.docs-prose h3,
|
|
.docs-prose h4,
|
|
.docs-prose h5,
|
|
.docs-prose h6 {
|
|
position: relative;
|
|
scroll-margin-top: 1.5rem;
|
|
}
|
|
|
|
.docs-prose h1 {
|
|
color: var(--color-foreground);
|
|
font-size: 1.875rem;
|
|
line-height: 1.25;
|
|
font-weight: 500;
|
|
margin-top: 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.docs-prose h2 {
|
|
color: var(--color-foreground);
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
font-weight: 500;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.docs-prose h3 {
|
|
color: var(--color-foreground);
|
|
font-size: 1.125rem;
|
|
line-height: 1.4;
|
|
font-weight: 500;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.docs-prose .heading-anchor {
|
|
position: absolute;
|
|
right: 100%;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding-right: 0.375rem;
|
|
text-decoration: none;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.docs-prose .heading-anchor:hover {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.docs-prose h1:hover .heading-anchor,
|
|
.docs-prose h2:hover .heading-anchor,
|
|
.docs-prose h3:hover .heading-anchor,
|
|
.docs-prose h4:hover .heading-anchor,
|
|
.docs-prose h5:hover .heading-anchor,
|
|
.docs-prose h6:hover .heading-anchor,
|
|
.docs-prose .heading-anchor:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.docs-prose .heading-anchor-icon {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.docs-prose p {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.docs-prose a {
|
|
color: var(--color-foreground);
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-decoration-color: var(--color-primary);
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.docs-prose a:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.docs-prose ul,
|
|
.docs-prose ol {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.docs-prose ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.docs-prose ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.docs-prose li {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.docs-prose strong {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-prose blockquote {
|
|
background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.docs-prose blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.docs-prose blockquote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs-prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.875rem;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.docs-prose th,
|
|
.docs-prose td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.625rem 0.75rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.docs-prose th {
|
|
background-color: var(--color-muted);
|
|
color: var(--color-foreground);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.docs-prose tbody tr:nth-child(even) {
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.docs-prose pre {
|
|
background-color: var(--color-card) !important;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 0.875rem;
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.docs-prose pre [data-line] {
|
|
display: inline-block;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.docs-prose pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.docs-prose :not(pre) > code {
|
|
background-color: var(--color-muted);
|
|
color: var(--color-foreground);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.docs-prose hr {
|
|
border-color: var(--color-border);
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.docs-source-footer {
|
|
border-top: 1px solid var(--color-border);
|
|
margin-top: 3rem;
|
|
padding-top: 1.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.docs-source-footer a {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.docs-source-footer a:hover {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
/* Blog post prose styles — adapted from moboudra.com */
|
|
.blog-prose {
|
|
color: rgba(250, 250, 250, 0.82);
|
|
line-height: 1.8;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.blog-prose h1,
|
|
.blog-prose h2,
|
|
.blog-prose h3 {
|
|
color: var(--color-foreground);
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
.blog-prose h1,
|
|
.blog-prose h2 {
|
|
font-size: 1.5rem;
|
|
line-height: 1.3;
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.blog-prose h3 {
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.blog-prose p {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.blog-prose a {
|
|
color: var(--color-foreground);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.blog-prose a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.blog-prose ul,
|
|
.blog-prose ol {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.blog-prose ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.blog-prose ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.blog-prose li {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.blog-prose blockquote {
|
|
border-left: 3px solid var(--color-border);
|
|
padding-left: 1rem;
|
|
color: rgba(250, 250, 250, 0.6);
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.blog-prose pre {
|
|
background-color: var(--color-card);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.blog-prose :not(pre) > code {
|
|
background-color: var(--color-muted);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.blog-prose img {
|
|
max-width: 100%;
|
|
border-radius: 0.5rem;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.blog-prose hr {
|
|
border-color: var(--color-border);
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
@theme {
|
|
--color-background: #101615;
|
|
--color-foreground: #fafafa;
|
|
--color-muted: #1a1f1e;
|
|
--color-muted-foreground: #a8adac;
|
|
--color-card: #171d1c;
|
|
--color-border: #252b2a;
|
|
--color-primary: #239956;
|
|
--color-primary-foreground: #ffffff;
|
|
--color-secondary: #252b2a;
|
|
--color-secondary-foreground: #fafafa;
|
|
|
|
/* Mockup palette (from app unistyles theme) */
|
|
--color-mock-surface0: #181b1a;
|
|
--color-mock-surface1: #1e2120;
|
|
--color-mock-surface2: #272a29;
|
|
--color-mock-surface3: #434645;
|
|
--color-mock-sidebar: #141716;
|
|
--color-mock-fg: #fafafa;
|
|
--color-mock-fg-muted: #a1a5a4;
|
|
--color-mock-border: #272a29;
|
|
--color-mock-border-accent: #313433;
|
|
--color-mock-accent: #20744a;
|
|
--color-mock-green: #22c55e;
|
|
--color-mock-green-400: #4ade80;
|
|
--color-mock-red: #f87171;
|
|
--color-mock-amber: #f59e0b;
|
|
--color-mock-blue: #3b82f6;
|
|
--color-mock-zinc500: #a1a5a4;
|
|
--color-mock-zinc600: #52525b;
|
|
--color-mock-diff-add: rgba(46, 160, 67, 0.15);
|
|
--color-mock-diff-remove: rgba(248, 81, 73, 0.1);
|
|
|
|
/* Syntax highlighting */
|
|
--color-syn-keyword: #ff7b72;
|
|
--color-syn-comment: #8b949e;
|
|
--color-syn-string: #a5d6ff;
|
|
--color-syn-number: #79c0ff;
|
|
--color-syn-function: #d2a8ff;
|
|
--color-syn-tag: #7ee787;
|
|
--color-syn-property: #79c0ff;
|
|
--color-syn-variable: #c9d1d9;
|
|
--color-syn-punctuation: #c9d1d9;
|
|
--color-syn-operator: #79c0ff;
|
|
|
|
--animate-flutter-left: flutter-left 0.6s ease-in-out infinite;
|
|
--animate-flutter-right: flutter-right 0.6s ease-in-out infinite;
|
|
--animate-float: float 8s ease-in-out infinite;
|
|
--animate-flutter-body: flutter-body 0.5s ease-in-out infinite;
|
|
--animate-synced-snake-dot: synced-snake-dot 950ms linear infinite;
|
|
}
|
|
|
|
/* Synced loader — 6-dot snake animation matching the real app.
|
|
Each dot runs this keyframe with a staggered delay so that at any moment
|
|
up to 4 dots are visible at decreasing opacity (head=1, trail=0.72/0.46/0.22).
|
|
steps(1,end) keeps each opacity level solid for its full 1/6-cycle slot. */
|
|
@keyframes synced-snake-dot {
|
|
0% {
|
|
opacity: 1;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
16.667% {
|
|
opacity: 0.72;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
33.333% {
|
|
opacity: 0.46;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
50% {
|
|
opacity: 0.22;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
66.667% {
|
|
opacity: 0;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
83.333% {
|
|
opacity: 0;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
}
|
|
|
|
@keyframes flutter-left {
|
|
0%,
|
|
100% {
|
|
transform: rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
50% {
|
|
transform: rotateY(50deg) rotateZ(-5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes flutter-right {
|
|
0%,
|
|
100% {
|
|
transform: rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
50% {
|
|
transform: rotateY(-50deg) rotateZ(5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes flutter-body {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-2px) rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float-1 {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
20% {
|
|
transform: translate(12px, -18px) rotate(5deg);
|
|
}
|
|
40% {
|
|
transform: translate(-8px, -30px) rotate(-3deg);
|
|
}
|
|
60% {
|
|
transform: translate(-15px, -12px) rotate(2deg);
|
|
}
|
|
80% {
|
|
transform: translate(5px, 8px) rotate(-4deg);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float-2 {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
15% {
|
|
transform: translate(-10px, -12px) rotate(-4deg);
|
|
}
|
|
35% {
|
|
transform: translate(8px, -25px) rotate(3deg);
|
|
}
|
|
55% {
|
|
transform: translate(15px, -8px) rotate(-2deg);
|
|
}
|
|
75% {
|
|
transform: translate(-5px, 10px) rotate(5deg);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes float-3 {
|
|
0% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: translate(18px, -10px) rotate(3deg);
|
|
}
|
|
50% {
|
|
transform: translate(5px, -35px) rotate(-5deg);
|
|
}
|
|
75% {
|
|
transform: translate(-12px, -15px) rotate(4deg);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
}
|