Enhance layout
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* Claude-inspired Color Palette */
|
||||
/* macOS-inspired Color Palette with Terracotta Primary */
|
||||
:root {
|
||||
/* Primary - Warm Coral/Terracotta */
|
||||
--color-primary: #D97757;
|
||||
@@ -13,15 +13,15 @@
|
||||
--color-bg: #FBF9F6;
|
||||
--color-bg-alt: #F5F1ED;
|
||||
--color-surface: #FFFFFF;
|
||||
--color-sidebar: #F0EFEC;
|
||||
--color-border: #E6E4DD;
|
||||
--color-sidebar: rgba(246, 246, 246, 0.8);
|
||||
--color-border: rgba(0, 0, 0, 0.1);
|
||||
--color-text-main: #383733;
|
||||
--color-text-muted: #75736E;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.03), 0 10px 25px rgba(0, 0, 0, 0.02);
|
||||
--shadow-warm: 0 4px 20px -2px rgba(217, 119, 87, 0.15);
|
||||
--shadow-elevated: 0 20px 40px -4px rgba(60, 50, 45, 0.08);
|
||||
/* Shadows - subtle macOS style */
|
||||
--shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015);
|
||||
--shadow-warm: 0 2px 12px -2px rgba(217, 119, 87, 0.12);
|
||||
--shadow-elevated: 0 12px 28px -4px rgba(60, 50, 45, 0.06);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -29,15 +29,15 @@
|
||||
--color-bg: #191918;
|
||||
--color-bg-alt: #1F1F1E;
|
||||
--color-surface: #242423;
|
||||
--color-sidebar: #1F1F1E;
|
||||
--color-border: #333331;
|
||||
--color-sidebar: rgba(30, 30, 30, 0.8);
|
||||
--color-border: rgba(255, 255, 255, 0.1);
|
||||
--color-text-main: #ECEBE8;
|
||||
--color-text-muted: #9E9D99;
|
||||
|
||||
/* Dark shadows */
|
||||
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.2), 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
--shadow-warm: 0 4px 20px -2px rgba(217, 119, 87, 0.2);
|
||||
--shadow-elevated: 0 20px 40px -4px rgba(0, 0, 0, 0.4);
|
||||
/* Dark shadows - subtle macOS style */
|
||||
--shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
--shadow-warm: 0 2px 12px -2px rgba(217, 119, 87, 0.15);
|
||||
--shadow-elevated: 0 12px 28px -4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -72,8 +72,8 @@
|
||||
--shadow-warm: var(--shadow-warm);
|
||||
--shadow-elevated: var(--shadow-elevated);
|
||||
|
||||
/* Font */
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
/* Font - macOS system fonts */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
@@ -182,3 +182,38 @@ body {
|
||||
.animate-border-glow {
|
||||
animation: border-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* macOS Vibrancy/Blur Effect */
|
||||
.bg-vibrancy {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.dark .bg-vibrancy {
|
||||
background: rgba(30, 30, 30, 0.72);
|
||||
}
|
||||
|
||||
/* macOS Traffic Lights */
|
||||
.traffic-lights {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.traffic-light {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.traffic-light.red {
|
||||
background: #FF5F56;
|
||||
}
|
||||
|
||||
.traffic-light.yellow {
|
||||
background: #FFBD2E;
|
||||
}
|
||||
|
||||
.traffic-light.green {
|
||||
background: #27C93F;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user