mirror of
https://github.com/projectsend/projectsend.git
synced 2026-09-16 16:45:07 +00:00
ignacionelson
6e47d76ba6
Client file sharing, rebuilt from the ground up: a private area per client, resumable uploads, folders, groups and categories, sharing with expiry dates and download limits, comments, file versions, an activity log, a REST API, and sixteen languages. This repository begins here. ProjectSend 2 was developed privately, and that development history is not published — the previous generation remains available, with its own history, at projectsend/legacy. Free software under the GNU General Public License v2, or (at your option) any later version.
362 lines
9.4 KiB
CSS
362 lines
9.4 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@plugin 'tailwindcss-animate';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
|
|
/*
|
|
* Companion packages under packages/ (e.g. packages/cloud-modules) live
|
|
* under a gitignored directory, which Tailwind v4's default content
|
|
* detection skips entirely — without this, any utility class used only in
|
|
* a package page (never duplicated in core) silently never gets generated.
|
|
*/
|
|
@source '../../packages/*/resources/js/**/*.tsx';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
--font-sans:
|
|
'Instrument Sans', 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-success: var(--success);
|
|
--color-success-foreground: var(--success-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-background);
|
|
--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);
|
|
}
|
|
|
|
/*
|
|
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
so we've added these compatibility styles to make sure everything still
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--background: hsl(0, 0%, 100%);
|
|
--foreground: hsl(0, 0%, 3.9%);
|
|
--card: hsl(0, 0%, 100%);
|
|
--card-foreground: hsl(0, 0%, 3.9%);
|
|
--popover: hsl(0, 0%, 100%);
|
|
--popover-foreground: hsl(0, 0%, 3.9%);
|
|
--primary: #4c2ab6; /* ProjectSend brand */
|
|
--primary-foreground: hsl(0, 0%, 98%);
|
|
--secondary: hsl(0, 0%, 96.1%);
|
|
--secondary-foreground: hsl(0, 0%, 9%);
|
|
--muted: hsl(0, 0%, 96.1%);
|
|
--muted-foreground: hsl(0, 0%, 45.1%);
|
|
--accent: hsl(255, 60%, 96%);
|
|
--accent-foreground: hsl(255, 50%, 30%);
|
|
--destructive: hsl(0, 84.2%, 60.2%);
|
|
--destructive-foreground: hsl(0, 0%, 98%);
|
|
--success: hsl(142, 71%, 45%);
|
|
--success-foreground: hsl(0, 0%, 98%);
|
|
--border: hsl(0, 0%, 92.8%);
|
|
--input: hsl(0, 0%, 89.8%);
|
|
--ring: #4c2ab6;
|
|
--chart-1: hsl(12, 76%, 61%);
|
|
--chart-2: hsl(173, 58%, 39%);
|
|
--chart-3: hsl(197, 37%, 24%);
|
|
--chart-4: hsl(43, 74%, 66%);
|
|
--chart-5: hsl(27, 87%, 67%);
|
|
--radius: 0.5rem;
|
|
--sidebar-background: hsl(0, 0%, 98%);
|
|
--sidebar-foreground: hsl(240, 5.3%, 30%);
|
|
--sidebar-primary: #4c2ab6;
|
|
--sidebar-primary-foreground: hsl(0, 0%, 98%);
|
|
--sidebar-accent: hsl(0, 0%, 94%);
|
|
--sidebar-accent-foreground: hsl(0, 0%, 30%);
|
|
--sidebar-border: hsl(0, 0%, 91%);
|
|
--sidebar-ring: #4c2ab6;
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(0, 0%, 9%);
|
|
--foreground: hsl(0, 0%, 98%);
|
|
--card: hsl(0, 0%, 12%);
|
|
--card-foreground: hsl(0, 0%, 98%);
|
|
--popover: hsl(0, 0%, 12%);
|
|
--popover-foreground: hsl(0, 0%, 98%);
|
|
--primary: hsl(255, 70%, 62%); /* ProjectSend brand, lightened for dark surfaces */
|
|
--primary-foreground: hsl(0, 0%, 98%);
|
|
--secondary: hsl(0, 0%, 17%);
|
|
--secondary-foreground: hsl(0, 0%, 98%);
|
|
--muted: hsl(0, 0%, 14%);
|
|
--muted-foreground: hsl(0, 0%, 65%);
|
|
--accent: hsl(255, 25%, 18%);
|
|
--accent-foreground: hsl(255, 60%, 92%);
|
|
--destructive: hsl(0, 84%, 60%);
|
|
--destructive-foreground: hsl(0, 0%, 98%);
|
|
--success: hsl(142, 65%, 42%);
|
|
--success-foreground: hsl(0, 0%, 98%);
|
|
--border: hsl(0, 0%, 18%);
|
|
--input: hsl(0, 0%, 18%);
|
|
--ring: hsl(255, 70%, 62%);
|
|
--chart-1: hsl(220, 70%, 50%);
|
|
--chart-2: hsl(160, 60%, 45%);
|
|
--chart-3: hsl(30, 80%, 55%);
|
|
--chart-4: hsl(280, 65%, 60%);
|
|
--chart-5: hsl(340, 75%, 55%);
|
|
--sidebar-background: hsl(0, 0%, 7%);
|
|
--sidebar-foreground: hsl(0, 0%, 80%);
|
|
--sidebar-primary: hsl(255, 70%, 62%);
|
|
--sidebar-primary-foreground: hsl(0, 0%, 98%);
|
|
--sidebar-accent: hsl(0, 0%, 18%);
|
|
--sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
|
|
--sidebar-border: hsl(0, 0%, 18%);
|
|
--sidebar-ring: hsl(255, 70%, 62%);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Uppy Dashboard: align with the app's design system. The theme
|
|
* (light/dark) is passed from React in sync with the app's toggle;
|
|
* these overrides handle typography, radius, and brand colors — our
|
|
* CSS variables flip with the theme automatically.
|
|
*/
|
|
.uppy-Dashboard-inner {
|
|
font-family: var(--font-sans);
|
|
border-radius: var(--radius-lg);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.uppy-Dashboard-AddFiles {
|
|
border-radius: calc(var(--radius-lg) - 4px);
|
|
}
|
|
|
|
.uppy-Dashboard-AddFiles-title {
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.uppy-Dashboard-browse {
|
|
color: var(--primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.uppy-Dashboard-browse:hover,
|
|
.uppy-Dashboard-browse:focus {
|
|
border-bottom-color: var(--primary);
|
|
}
|
|
|
|
.uppy-DashboardContent-bar {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.uppy-DashboardContent-back,
|
|
.uppy-DashboardContent-addMore {
|
|
color: var(--primary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.uppy-DashboardContent-back:hover,
|
|
.uppy-DashboardContent-addMore:hover {
|
|
background-color: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
.uppy-DashboardContent-addMore svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.uppy-StatusBar-actionBtn--upload,
|
|
.uppy-c-btn-primary {
|
|
background-color: var(--primary);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.uppy-StatusBar-actionBtn--upload:hover,
|
|
.uppy-c-btn-primary:hover {
|
|
background-color: color-mix(in srgb, var(--primary) 85%, black);
|
|
}
|
|
|
|
.uppy-Dashboard-note,
|
|
.uppy-StatusBar-statusPrimary,
|
|
.uppy-StatusBar-statusSecondary {
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
[data-uppy-theme='dark'] .uppy-Dashboard-inner {
|
|
background-color: var(--card);
|
|
}
|
|
|
|
/*
|
|
* The API guide, rendered from docs/api-guide.md by ApiDocsController.
|
|
* No typography plugin is installed, and adding one for a single page
|
|
* would be a lot of CSS for one screen — these are the handful of element
|
|
* styles that markdown actually produces, scoped so they cannot leak into
|
|
* the rest of the app.
|
|
*/
|
|
.api-guide h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-block: 2rem 0.75rem;
|
|
}
|
|
|
|
.api-guide h2 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-block: 2rem 0.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.api-guide h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-block: 1.25rem 0.375rem;
|
|
}
|
|
|
|
.api-guide p,
|
|
.api-guide ul,
|
|
.api-guide ol {
|
|
margin-block: 0.75rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.api-guide ul,
|
|
.api-guide ol {
|
|
padding-inline-start: 1.5rem;
|
|
}
|
|
|
|
.api-guide ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.api-guide ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.api-guide li {
|
|
margin-block: 0.25rem;
|
|
}
|
|
|
|
.api-guide a {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.api-guide code {
|
|
background-color: var(--muted);
|
|
border-radius: 0.25rem;
|
|
padding: 0.1rem 0.3rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.api-guide pre {
|
|
background-color: var(--muted);
|
|
border-radius: 0.375rem;
|
|
padding: 0.875rem 1rem;
|
|
overflow-x: auto;
|
|
margin-block: 0.875rem;
|
|
}
|
|
|
|
.api-guide pre code {
|
|
background: none;
|
|
padding: 0;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.api-guide table {
|
|
width: 100%;
|
|
margin-block: 1rem;
|
|
font-size: 0.875rem;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.api-guide th,
|
|
.api-guide td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.5rem 0.75rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.api-guide th {
|
|
background-color: color-mix(in srgb, var(--muted) 60%, transparent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.api-guide blockquote {
|
|
border-inline-start: 3px solid var(--border);
|
|
padding-inline-start: 1rem;
|
|
margin-block: 1rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.api-guide hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
margin-block: 2rem;
|
|
}
|