b23ab0166e
- Added new automation-related routes and controllers for managing automations. - Introduced automation nodes in the UI with distinct styles and interactions. - Updated sidebar to include navigation for automations. - Enhanced post creation logic to support automation metadata. - Refactored content type and platform enums into types for better type safety. - Added localization for automation-related terms in English, Spanish, and Portuguese. - Improved error handling in various components to accommodate new features.
284 lines
9.3 KiB
CSS
284 lines
9.3 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
@import 'vue-sonner/style.css';
|
|
@plugin '@tailwindcss/typography';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
|
|
/* Dark mode is intentionally disabled to match the marketing site
|
|
(which is light-only). Tailwind v4 defaults `dark:` to the
|
|
`prefers-color-scheme: dark` media query, so without this override
|
|
the OS theme would still flip preview internals to dark. Pin the
|
|
variant to a `.dark` class that we never apply. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
|
|
:root {
|
|
/* TryPost design system — warm cream + ink + signature violet.
|
|
Mirrors the marketing site (~/Herd/trypost-site) so the app and the
|
|
site share one identity. All structural borders are ink-black. */
|
|
--background: #faf8f5;
|
|
--foreground: #0a0a0a;
|
|
--card: #ffffff;
|
|
--card-foreground: #0a0a0a;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #0a0a0a;
|
|
--primary: #7c3aed;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #f4f4f0;
|
|
--secondary-foreground: #0a0a0a;
|
|
--muted: #f4f4f0;
|
|
--muted-foreground: #52525b;
|
|
--accent: #ede9fe;
|
|
--accent-foreground: #5b21b6;
|
|
--destructive: #e54b4f;
|
|
--destructive-foreground: #ffffff;
|
|
--success: #16a34a;
|
|
--error: #e54b4f;
|
|
--warning: #d97706;
|
|
--info: #2563eb;
|
|
--border: #0a0a0a;
|
|
--input: #0a0a0a;
|
|
--ring: #7c3aed;
|
|
--chart-1: #7c3aed;
|
|
--chart-2: #8b5cf6;
|
|
--chart-3: #a78bfa;
|
|
--chart-4: #5b21b6;
|
|
--chart-5: #4c1d95;
|
|
--sidebar: #ffffff;
|
|
--sidebar-foreground: #0a0a0a;
|
|
--sidebar-primary: #7c3aed;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #ede9fe;
|
|
--sidebar-accent-foreground: #5b21b6;
|
|
--sidebar-border: #0a0a0a;
|
|
--sidebar-ring: #7c3aed;
|
|
--font-sans: Figtree, ui-sans-serif, system-ui, -apple-system,
|
|
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-serif: 'Instrument Serif', ui-serif, Georgia, Cambria,
|
|
'Times New Roman', Times, serif;
|
|
--font-display: 'Instrument Serif', ui-serif, Georgia, Cambria,
|
|
'Times New Roman', Times, serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
|
|
Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--radius: 0.75rem;
|
|
/* Gumroad-style offset shadows: solid ink, no blur. */
|
|
--shadow-2xs: 1px 1px 0 0 #0a0a0a;
|
|
--shadow-xs: 2px 2px 0 0 #0a0a0a;
|
|
--shadow-sm: 3px 3px 0 0 #0a0a0a;
|
|
--shadow: 4px 4px 0 0 #0a0a0a;
|
|
--shadow-md: 5px 5px 0 0 #0a0a0a;
|
|
--shadow-lg: 6px 6px 0 0 #0a0a0a;
|
|
--shadow-xl: 8px 8px 0 0 #0a0a0a;
|
|
--shadow-2xl: 10px 10px 0 0 #0a0a0a;
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
}
|
|
|
|
@theme inline {
|
|
--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);
|
|
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
--font-serif: var(--font-serif);
|
|
--font-display: var(--font-display);
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
|
|
--shadow-2xs: var(--shadow-2xs);
|
|
--shadow-xs: var(--shadow-xs);
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow: var(--shadow);
|
|
--shadow-md: var(--shadow-md);
|
|
--shadow-lg: var(--shadow-lg);
|
|
--shadow-xl: var(--shadow-xl);
|
|
--shadow-2xl: var(--shadow-2xl);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: var(--font-sans);
|
|
}
|
|
}
|
|
|
|
/* Site headline + container utility classes — mirrors trypost-site's
|
|
`assets/css/utility-patterns.css`. Use `.h1`/.h2`/.h3` for serif
|
|
display headlines (Instrument Serif) instead of stacking Tailwind
|
|
text-* utilities. */
|
|
.h1 {
|
|
font-family: var(--font-display);
|
|
@apply text-4xl sm:text-5xl lg:text-7xl xl:text-[5.5rem] font-normal tracking-tight leading-[1.05];
|
|
}
|
|
|
|
.h2 {
|
|
font-family: var(--font-display);
|
|
@apply text-pretty text-3xl font-normal tracking-tight leading-[1.1] sm:text-5xl;
|
|
}
|
|
|
|
.h3 {
|
|
font-family: var(--font-display);
|
|
@apply text-pretty text-2xl font-normal tracking-tight sm:text-4xl;
|
|
}
|
|
|
|
.trypost-container {
|
|
@apply relative max-w-7xl w-full flex-1 mx-auto flex flex-col justify-center;
|
|
}
|
|
|
|
/* Automations canvas nodes — TryPost brutalist identity:
|
|
thick ink borders, hard offset shadow, warm card background, colored header
|
|
strip that fills the top of the card with the accent tint. */
|
|
.automation-node {
|
|
position: relative;
|
|
min-width: 230px;
|
|
background: var(--card);
|
|
border: 2px solid var(--foreground);
|
|
border-radius: 14px;
|
|
box-shadow: 3px 3px 0 var(--foreground);
|
|
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
.automation-node:hover {
|
|
transform: translate(-1px, -1px);
|
|
box-shadow: 4px 4px 0 var(--foreground);
|
|
}
|
|
|
|
.automation-node--wide {
|
|
min-width: 260px;
|
|
}
|
|
|
|
.automation-node.is-selected {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 5px 5px 0 #7c3aed;
|
|
}
|
|
|
|
.automation-node__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.625rem 0.875rem;
|
|
border-bottom: 2px solid var(--foreground);
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
|
|
.automation-node__icon-tile {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 2px solid var(--foreground);
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
/* Header accent tint mirrors the icon tile color, applied to the whole header
|
|
strip so the node type is identifiable at a glance from the canvas. */
|
|
.automation-node__icon-tile--violet { background: #ede9fe; color: #5b21b6; }
|
|
.automation-node__icon-tile--blue { background: #dbeafe; color: #1d4ed8; }
|
|
.automation-node__icon-tile--amber { background: #fef3c7; color: #92400e; }
|
|
.automation-node__icon-tile--rose { background: #ffe4e6; color: #be123c; }
|
|
.automation-node__icon-tile--emerald { background: #d1fae5; color: #047857; }
|
|
.automation-node__icon-tile--slate { background: #e2e8f0; color: #334155; }
|
|
.automation-node__icon-tile--zinc { background: #e4e4e7; color: #27272a; }
|
|
|
|
.automation-node--accent-violet .automation-node__header { background: #f5f3ff; }
|
|
.automation-node--accent-blue .automation-node__header { background: #eff6ff; }
|
|
.automation-node--accent-amber .automation-node__header { background: #fffbeb; }
|
|
.automation-node--accent-rose .automation-node__header { background: #fff1f2; }
|
|
.automation-node--accent-emerald .automation-node__header { background: #ecfdf5; }
|
|
.automation-node--accent-slate .automation-node__header { background: #f1f5f9; }
|
|
.automation-node--accent-zinc .automation-node__header { background: #f4f4f5; }
|
|
|
|
.automation-node__title {
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
color: var(--foreground);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.automation-node__summary {
|
|
padding: 0.625rem 0.875rem 0.75rem 0.875rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: color-mix(in srgb, var(--foreground) 70%, transparent);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
|
|
.automation-node__branches {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.375rem 0.875rem 0.625rem 0.875rem;
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.automation-node__branch--yes { color: #047857; }
|
|
.automation-node__branch--no { color: #be123c; }
|
|
|
|
/* JsonViewer — GitHub Light palette for highlight.js JSON output. */
|
|
|
|
.json-viewer__body {
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
margin: 0;
|
|
background: #ffffff;
|
|
color: #24292f;
|
|
}
|
|
|
|
.json-viewer .hljs-attr { color: #0550ae; }
|
|
.json-viewer .hljs-string { color: #0a3069; }
|
|
.json-viewer .hljs-number { color: #0550ae; }
|
|
.json-viewer .hljs-literal { color: #cf222e; }
|
|
.json-viewer .hljs-punctuation { color: #57606a; }
|
|
.json-viewer .hljs-comment { color: #6e7781; font-style: italic; }
|
|
|