NodePanel/src/app/globals.css at main · NodePassProject/NodePanel · GitHub

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
  @apply text-sm; /* 14px */
  line-height: 1.6;
  letter-spacing: 0.5px;
}

h1 {
  @apply text-2xl font-bold; /* 24px */
}

h2 {
  @apply text-lg font-semibold; /* 18px */
}


.card-hover-shadow {
  transition: box-shadow 0.3s ease-in-out;
}

.dark .card-hover-shadow {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /* Darker base shadow for dark mode */
}

.dark .card-hover-shadow:hover {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Darker hover shadow for dark mode */
}

.light .card-hover-shadow {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08); /* Lighter base shadow for light mode */
}

.light .card-hover-shadow:hover {
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.12); /* Lighter hover shadow for light mode */
}


.text-flow-effect {
  background: linear-gradient(
    90deg,
    hsl(var(--foreground)) 0%,
    hsl(var(--foreground)) 30%,
    hsl(var(--primary)) 45%,
    hsl(var(--accent)) 55%,
    hsl(var(--foreground)) 70%,
    hsl(var(--foreground)) 100%
  );
  background-size: 400% auto; /* Increased size for smoother transitions */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textFlowAnimation 10s linear infinite;
  display: inline-block; /* Important for h1 */
}

@keyframes textFlowAnimation {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}


@layer base {
  :root {
    --background: 0 0% 100%; /* #FFFFFF White */
    --foreground: 0 0% 13.7%; /* #212121 Black for text */

    --card: 0 0% 100%; /* White */
    --card-foreground: 0 0% 13.7%; /* #212121 */

    --popover: 0 0% 100%; /* White */
    --popover-foreground: 0 0% 13.7%; /* #212121 */

    --primary: 211 100% 50%; /* #007BFF 主蓝色 */
    --primary-foreground: 0 0% 100%; /* White for text on primary */

    --secondary: 0 0% 95.7%; /* #F4F4F4 浅灰色 */
    --secondary-foreground: 0 0% 13.7%; /* #212121 Black for text on secondary */

    --muted: 0 0% 90%; /* Light gray for muted elements */
    --muted-foreground: 0 0% 40%; /* Darker gray for muted text */

    --accent: 187 100% 42%; /* Vibrant Cyan - kept from previous for accent elements */
    --accent-foreground: 0 0% 100%; /* White */

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%; /* #E5E5E5 Slightly darker light gray for borders */
    --input: 0 0% 89.8%; /* Match border for input */
    --ring: 211 100% 50%; /* #007BFF Ring color to match new primary */

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;

    --header-height: 4rem; /* 64px, assuming h-16 for header */
    --footer-height: 3.75rem; /* 60px, example for footer py-6 text-sm */
  }

  .dark {
    --background: 0 0% 8%; /* #141414 - Deeper black */
    --foreground: 0 0% 95.7%; /* #F4F4F4 Light Gray for text */

    --card: 0 0% 12%; /* #1F1F1F - Darker card, visibly lighter than new background */
    --card-foreground: 0 0% 95.7%; /* #F4F4F4 */

    --popover: 0 0% 12%; /* Match card background */
    --popover-foreground: 0 0% 95.7%; /* #F4F4F4 */

    --primary: 211 100% 50%; /* #007BFF 主蓝色 */
    --primary-foreground: 0 0% 100%; /* White */

    --secondary: 0 0% 15%; /* #262626 - Darker secondary */
    --secondary-foreground: 0 0% 95.7%; /* #F4F4F4 */

    --muted: 0 0% 10%; /* #1A1A1A - Very dark muted, for subtle elements */
    --muted-foreground: 0 0% 65%; /* Adjusted for readability on darker muted */

    --accent: 187 100% 42%; /* Vibrant Cyan */
    --accent-foreground: 0 0% 100%; /* White */

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 20%; /* #333333 - Darker border, visible on dark surfaces */
    --input: 0 0% 18%; /* #2E2E2E - Darker input background */
    --ring: 211 100% 50%; /* #007BFF Ring color to match primary */

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}