336 lines
8.1 KiB
CSS
336 lines
8.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Photo sharing app design system - modern gradients and glass effects */
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 15%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 15%;
|
|
--card-glass: 0 0% 100% / 0.8;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 15%;
|
|
|
|
--primary: 262 83% 58%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--primary-glow: 280 100% 70%;
|
|
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
|
|
--accent: 193 76% 59%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--accent-glow: 193 100% 70%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 262 83% 58%;
|
|
|
|
--radius: 0.75rem;
|
|
|
|
/* Photo sharing specific tokens */
|
|
--gradient-primary: linear-gradient(135deg, hsl(262 83% 58%), hsl(280 100% 70%));
|
|
--gradient-secondary: linear-gradient(135deg, hsl(193 76% 59%), hsl(262 83% 58%));
|
|
--gradient-hero: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(262 83% 58% / 0.05) 100%);
|
|
--glass-bg: hsl(0 0% 100% / 0.8);
|
|
--glass-border: hsl(240 5.9% 90%);
|
|
--photo-shadow: 0 25px 50px -12px hsl(262 83% 58% / 0.15);
|
|
--glow-shadow: 0 0 40px hsl(262 83% 58% / 0.2);
|
|
|
|
--sidebar-background: 0 0% 98%;
|
|
--sidebar-foreground: 240 5.3% 26.1%;
|
|
--sidebar-primary: 240 5.9% 10%;
|
|
--sidebar-primary-foreground: 0 0% 98%;
|
|
--sidebar-accent: 240 4.8% 95.9%;
|
|
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
--sidebar-border: 220 13% 91%;
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
.dark {
|
|
/* Material Design dark theme base - #121212 */
|
|
--background: 0 0% 7%;
|
|
--foreground: 0 0% 95%;
|
|
|
|
/* Surface elevation system following Material Design */
|
|
--card: 0 0% 9%;
|
|
/* 1dp elevation = base + 5% white overlay */
|
|
--card-foreground: 0 0% 95%;
|
|
--card-glass: 0 0% 12% / 0.8;
|
|
/* Higher elevation surfaces */
|
|
|
|
--popover: 0 0% 11%;
|
|
/* 2dp elevation = base + 7% white overlay */
|
|
--popover-foreground: 0 0% 95%;
|
|
|
|
/* Accessible primary colors for dark theme */
|
|
--primary: 270 91% 75%;
|
|
/* Lighter for better accessibility */
|
|
--primary-foreground: 0 0% 10%;
|
|
--primary-glow: 280 100% 80%;
|
|
|
|
--secondary: 0 0% 15%;
|
|
/* 3dp elevation = base + 8% white overlay */
|
|
--secondary-foreground: 0 0% 95%;
|
|
|
|
--muted: 0 0% 15%;
|
|
--muted-foreground: 0 0% 65%;
|
|
/* Better contrast for muted text */
|
|
|
|
--accent: 270 91% 75%;
|
|
--accent-foreground: 0 0% 10%;
|
|
--accent-glow: 280 100% 80%;
|
|
|
|
--destructive: 0 70% 50%;
|
|
/* More accessible red */
|
|
--destructive-foreground: 0 0% 95%;
|
|
|
|
--border: 0 0% 15%;
|
|
--input: 0 0% 15%;
|
|
--ring: 270 91% 75%;
|
|
|
|
/* Material Design elevation surfaces */
|
|
--surface-1dp: 0 0% 9%;
|
|
/* Cards, switches */
|
|
--surface-2dp: 0 0% 11%;
|
|
/* App bars (resting) */
|
|
--surface-3dp: 0 0% 12%;
|
|
/* Refresh indicator, search bar (resting) */
|
|
--surface-4dp: 0 0% 13%;
|
|
/* App bars (scrolled) */
|
|
--surface-6dp: 0 0% 14%;
|
|
/* FAB (resting), snackbars */
|
|
--surface-8dp: 0 0% 15%;
|
|
/* Menus, cards (picked up), switches (thumb) */
|
|
--surface-12dp: 0 0% 16%;
|
|
/* FAB (pressed) */
|
|
--surface-16dp: 0 0% 17%;
|
|
/* Navigation drawer, modal bottom sheets */
|
|
--surface-24dp: 0 0% 18%;
|
|
/* Dialogs */
|
|
|
|
/* Photo sharing specific tokens for dark mode */
|
|
--gradient-primary: linear-gradient(135deg, hsl(270 91% 75%), hsl(280 100% 80%));
|
|
--gradient-secondary: linear-gradient(135deg, hsl(270 91% 75%), hsl(260 85% 70%));
|
|
--gradient-hero: linear-gradient(135deg, hsl(0 0% 7%) 0%, hsl(270 91% 75% / 0.1) 100%);
|
|
--glass-bg: hsl(0 0% 12% / 0.4);
|
|
--glass-border: hsl(270 91% 75% / 0.2);
|
|
--photo-shadow: 0 25px 50px -12px hsl(270 91% 75% / 0.25);
|
|
--glow-shadow: 0 0 40px hsl(270 91% 75% / 0.3);
|
|
|
|
--sidebar-background: 0 0% 7%;
|
|
--sidebar-foreground: 0 0% 95%;
|
|
--sidebar-primary: 270 91% 75%;
|
|
--sidebar-primary-foreground: 0 0% 10%;
|
|
--sidebar-accent: 0 0% 15%;
|
|
--sidebar-accent-foreground: 0 0% 95%;
|
|
--sidebar-border: 0 0% 15%;
|
|
--sidebar-ring: 270 91% 75%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
/* Internet Explorer 10+ */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
/* Safari and Chrome */
|
|
}
|
|
|
|
/* Custom thin scrollbar */
|
|
.scrollbar-custom::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-custom::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-custom::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted-foreground) / 0.3);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
|
|
/* Ensure links in prose content are clickable and styled */
|
|
.prose a {
|
|
@apply text-primary hover:text-primary/80 underline hover:no-underline transition-colors cursor-pointer;
|
|
}
|
|
|
|
.prose a:visited {
|
|
@apply text-primary/70;
|
|
}
|
|
|
|
/* Enhanced prose table styling */
|
|
.prose table {
|
|
@apply w-full border-collapse border border-border;
|
|
}
|
|
|
|
.prose thead {
|
|
@apply bg-muted/50;
|
|
}
|
|
|
|
.prose th {
|
|
@apply border border-border px-4 py-2 text-left font-semibold;
|
|
}
|
|
|
|
.prose td {
|
|
@apply border border-border px-4 py-2;
|
|
}
|
|
|
|
.prose tbody tr:hover {
|
|
@apply bg-muted/30;
|
|
}
|
|
|
|
/* Heading styles */
|
|
.prose h1 {
|
|
@apply text-3xl font-bold mb-4 mt-6;
|
|
}
|
|
|
|
.prose h2 {
|
|
@apply text-2xl font-bold mb-3 mt-5;
|
|
}
|
|
|
|
.prose h3 {
|
|
@apply text-xl font-semibold mb-2 mt-4;
|
|
}
|
|
|
|
.prose h4 {
|
|
@apply text-lg font-semibold mb-2 mt-3;
|
|
}
|
|
|
|
/* List styles */
|
|
.prose ul {
|
|
@apply list-disc list-inside mb-4;
|
|
}
|
|
|
|
.prose ol {
|
|
@apply list-decimal list-inside mb-4;
|
|
}
|
|
|
|
.prose li {
|
|
@apply mb-1;
|
|
}
|
|
|
|
/* Code blocks */
|
|
.prose code {
|
|
@apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono text-foreground font-medium;
|
|
}
|
|
|
|
.prose pre {
|
|
@apply bg-muted p-4 rounded-lg overflow-x-auto mb-4 text-foreground;
|
|
}
|
|
|
|
.prose pre code {
|
|
@apply bg-transparent p-0 text-foreground font-normal;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
.prose blockquote {
|
|
@apply border-l-4 border-primary pl-4 italic my-4;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
.prose p {
|
|
@apply mb-4;
|
|
}
|
|
|
|
/* Horizontal rules */
|
|
.prose hr {
|
|
@apply border-t border-border my-6;
|
|
}
|
|
|
|
/* Strong/Bold */
|
|
.prose strong {
|
|
@apply font-bold;
|
|
}
|
|
|
|
/* Emphasis/Italic */
|
|
.prose em {
|
|
@apply italic;
|
|
}
|
|
}
|
|
|
|
/* TikTok-style Video Player Overrides */
|
|
@layer components {
|
|
|
|
/* Force Vidstack video to use object-contain for full video display */
|
|
[data-media-player] video {
|
|
object-fit: contain !important;
|
|
object-position: center !important;
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Constrain video player to viewport */
|
|
[data-media-player] {
|
|
max-width: 100% !important;
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
/* Email Widget Overrides (Design View) */
|
|
/* Fix for "font-size: 0" hack in email templates causing invisible text in editor */
|
|
.html-widget-container .long-text {
|
|
font-size: 12px;
|
|
/* The inline style from the widget prop will override this if valid */
|
|
}
|
|
|
|
/*
|
|
Reset email table structure for Editor View
|
|
- Makes the gray structural background transparent
|
|
- Allows widgets to take full width of their container in the editor
|
|
*/
|
|
.html-widget-container .vb-outer {
|
|
background-color: transparent !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.html-widget-container .vb-outer div {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.html-widget-container table {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* RJSF Textarea Dark Mode Fix */
|
|
/* Textareas inherit browser defaults which show white in dark mode */
|
|
textarea {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
} |