Enhance layout

This commit is contained in:
decolua
2026-01-31 12:58:04 +07:00
parent 8c37b39eed
commit 8897df5036
23 changed files with 458 additions and 326 deletions

View File

@@ -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;
}