1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom base styles - Dark translucent theme */
@layer base {
body {
@apply antialiased text-slate-200 bg-slate-950 min-h-screen relative;
font-family: 'Inter', system-ui, sans-serif;
}
.bg-overlay {
@apply fixed inset-0 z-[-1] opacity-40 bg-cover bg-center bg-no-repeat;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
@apply text-white font-medium tracking-tight;
}
a { @apply text-slate-300 hover:text-white transition-colors; }
}
/* Custom components */
@layer components {
/* Dark Glass Card */
.card {
@apply bg-slate-900/80 backdrop-blur-md rounded-xl p-5 transition-all duration-200 border border-white/5;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.card-hover {
@apply hover:bg-slate-800/90 hover:border-white/10;
}
/* Panel with overflow clipping */
.bg-panel {
@apply overflow-hidden;
}
/* Navigation Pills */
.tab-button {
@apply px-2 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-light text-white/70 tracking-wide transition-all duration-200;
}
.tab-button:hover {
@apply bg-white/10 text-white;
}
.tab-button-active {
@apply bg-white/20 text-white;
}
/* Section Header */
.section-header {
@apply text-xl font-light text-white tracking-wide mb-4;
}
.badge {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-black/40;
}
.board-card {
@apply card card-hover;
}
.trello-card-item {
@apply bg-black/40 rounded-lg p-4 hover:bg-black/50 transition-all overflow-hidden;
}
.task-item {
@apply bg-black/70 rounded-lg transition-colors overflow-hidden;
box-shadow: 0 0 12px black;
}
.task-item:hover {
@apply bg-black/80;
}
/* Text truncation for long content */
.truncate-text {
@apply truncate;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Custom utilities */
@layer utilities {
.section-spacing { @apply mb-10; }
.content-max-width { @apply max-w-7xl mx-auto px-3 sm:px-6 lg:px-8; }
.card-grid { @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6; }
/* Scrollbar styling */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: rgba(203, 213, 225, 0.5) transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
background: rgba(203, 213, 225, 0.5);
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); }
}
@media print {
.no-print { display: none !important; }
}
|
