|
1 | | -/* General Card Styles */ |
2 | | -.card { |
3 | | - min-height: 150px; /* Ensures consistent card height */ |
4 | | - background-size: cover; /* Ensure the image covers the entire card */ |
5 | | - background-repeat: no-repeat; /* Prevent the image from repeating */ |
6 | | - background-position: center center; /* Center the image */ |
7 | | - color: #fff; /* Adjust text color for better contrast */ |
8 | | - border: none; /* Remove default border */ |
9 | | - border-radius: 10px; /* Rounded corners */ |
10 | | - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Box shadow for depth */ |
11 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */ |
12 | | - position: relative; /* Allows positioning for the pseudo-element */ |
13 | | -} |
14 | | - |
15 | | -/* Specific Background Colors */ |
16 | | -.card.bg-basic { |
17 | | - background-color: var(--color-primary); /* Bright blue for basic info */ |
18 | | -} |
19 | | - |
20 | | -.card.bg-username { |
21 | | - background-color: var(--color-username); /* Bright blue for username */ |
22 | | -} |
23 | | - |
24 | | -.card.bg-ipv4 { |
25 | | - background-color: var(--color-ip); /* Bright blue for IP address */ |
26 | | -} |
27 | | - |
28 | | -.card.bg-cpu { |
29 | | - background-color: var(--color-cpu); /* Red for CPU */ |
30 | | -} |
31 | | - |
32 | | -.card.bg-boot { |
33 | | - background-color: var(--color-boot); /* Green for boot time */ |
34 | | -} |
35 | | - |
36 | | -.card.bg-connection { |
37 | | - background-color: var(--color-connection); /* Red for connection */ |
38 | | -} |
39 | | - |
40 | | -.card.bg-dashboard-memory { |
41 | | - background-color: var(--color-bg-dashboard-memory); /* Green for memory card */ |
42 | | -} |
43 | | - |
44 | | -.card.bg-cpu-usage { |
45 | | - background-color: var(--color-cpu-usage); /* Yellow for CPU usage */ |
46 | | -} |
47 | | - |
48 | | -.card.bg-memory { |
49 | | - background-color: var(--color-memory); /* Purple for memory usage */ |
50 | | -} |
51 | | - |
52 | | -.card.bg-disk { |
53 | | - background-color: var(--color-disk); /* Gray for disk usage */ |
54 | | -} |
55 | | - |
56 | | -.card.bg-uptime { |
57 | | - background-color: var(--color-uptime); /* Cyan for uptime */ |
58 | | -} |
59 | | - |
60 | | -.card.bg-network { |
61 | | - background-color: var(--color-network); /* Bright blue for network */ |
62 | | -} |
63 | | - |
64 | | -.card.bg-speedtest { |
65 | | - background-color: var(--color-speedtest); /* Bright blue for speedtest */ |
66 | | -} |
67 | | - |
68 | | -.card-body { |
69 | | - display: flex; |
70 | | - flex-direction: column; |
71 | | - justify-content: center; |
72 | | - align-items: center; /* Center-aligns the content */ |
73 | | -} |
74 | | - |
75 | | -.card-title { |
76 | | - font-size: 1.25rem; /* Adjusts font size for titles */ |
77 | | -} |
78 | | - |
79 | | -.card-text { |
80 | | - font-size: 1.5rem; /* Adjusts font size for text */ |
81 | | -} |
82 | | - |
83 | | -/* Battery Card Styles */ |
84 | | -.battery-card { |
85 | | - background: linear-gradient(135deg, #ffffff, #e0e0e0); |
86 | | - border-radius: 10px; |
87 | | - border: none; |
88 | | - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); |
89 | | - transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; |
90 | | - color: #fff; |
91 | | -} |
92 | | - |
93 | | -.battery-card[data-battery="100"] { |
94 | | - background: linear-gradient(135deg, #76c7c0, #4caf50); |
95 | | -} |
96 | | - |
97 | | -.battery-card[data-battery="75"] { |
98 | | - background: linear-gradient(135deg, #76c7c0, #ffeb3b); |
99 | | -} |
100 | | - |
101 | | -.battery-card[data-battery="50"] { |
102 | | - background: linear-gradient(135deg, #fbc02d, #ff9800); |
103 | | -} |
104 | | - |
105 | | -.battery-card[data-battery="25"] { |
106 | | - background: linear-gradient(135deg, #ff7043, #f44336); |
107 | | -} |
108 | | - |
109 | | -.battery-card[data-battery="0"] { |
110 | | - background: linear-gradient(135deg, #f44336, #d32f2f); |
111 | | - color: #fff; |
112 | | -} |
113 | | - |
114 | | -/* The hover effect still applies */ |
115 | | -.battery-card:hover { |
116 | | - transform: translateY(-10px); |
117 | | - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
118 | | - color: #fff; |
119 | | -} |
120 | | - |
121 | | -/* Card containing CPU core visualization */ |
122 | | -.card.bg-cpu { |
123 | | - position: relative; |
124 | | -} |
125 | | - |
126 | | -.cpu-core-visualization { |
127 | | - display: flex; |
128 | | - gap: 0.5rem; /* Space between bars */ |
129 | | - margin-top: 1rem; |
130 | | - justify-content: center; /* Center-align bars */ |
131 | | -} |
132 | | - |
133 | | - |
134 | | -/* Individual bar representing a CPU core */ |
135 | | -.cpu-core-bar { |
136 | | - width: 10px; /* Width of each bar */ |
137 | | - height: 10px; /* Height of each bar */ |
138 | | - background-color: #ffffff; /* Bar color */ |
139 | | - border-radius: 5px; /* Rounded corners */ |
140 | | - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for depth */ |
141 | | - transition: background-color 0.3s ease; /* Smooth transition on hover */ |
142 | | -} |
143 | | - |
144 | | -/* Card Red Bottom Effect */ |
145 | | -.card::before { |
146 | | - content: ""; |
147 | | - position: absolute; |
148 | | - bottom: 0; |
149 | | - left: 0; |
150 | | - width: 100%; |
151 | | - height: 10px; /* Height of the red effect */ |
152 | | - border-radius: 0 0 10px 10px; /* Match the card's border radius */ |
153 | | - z-index: 1; /* Ensure it's on top of the card content */ |
154 | | -} |
155 | | - |
156 | | -.cpu-core-bar:hover { |
157 | | - background-color: var(--color-cpu); /* Red color on hover */ |
158 | | - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Slightly larger shadow */ |
159 | | - transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
160 | | - filter: brightness(1.2); /* Brighten the bar */ |
161 | | - |
162 | | -} |
163 | | - |
164 | | -/* General Card Hover Effect */ |
165 | | -.card:hover { |
166 | | - transform: translateY(-10px); /* Slight lift effect */ |
167 | | - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */ |
168 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
169 | | -} |
170 | | - |
171 | | -/* Specific Background Colors with Hover Effects */ |
172 | | - |
173 | | -/* User-related info */ |
174 | | -.card.bg-username:hover { |
175 | | - transform: translateX(-10px); /* Slight lift effect */ |
176 | | - box-shadow: 0 10px 20px var(--color-username); |
177 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
178 | | -} |
179 | | - |
180 | | -/* Boot time */ |
181 | | -.card.bg-boot:hover { |
182 | | - transform: translateZ(-10px); /* Slight lift effect */ |
183 | | - box-shadow: 0 10px 20px var(--color-boot); |
184 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
185 | | -} |
186 | | - |
187 | | -/* Memory Use */ |
188 | | -.card.bg-dashboard-memory:hover { |
189 | | - transform: translateY(-10px); /* Slight lift effect */ |
190 | | - box-shadow: 0 10px 20px var(--color-bg-dashboard-memory); |
191 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
192 | | -} |
193 | | - |
194 | | -/* Network info */ |
195 | | -.card.bg-connection:hover { |
196 | | - transform: translateX(-10px); /* Slight lift effect */ |
197 | | - box-shadow: 0 10px 20px var(--color-connection); |
198 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
199 | | -} |
200 | | - |
201 | | -/* CPU-related info */ |
202 | | -.card.bg-cpu:hover { |
203 | | - transform: translateX(-10px); /* Slight lift effect */ |
204 | | - box-shadow: 0 10px 20px var(--color-cpu); |
205 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
206 | | -} |
207 | | - |
208 | | -/* Battery Card Styles */ |
209 | | -.battery-card:hover { |
210 | | - transform: translateY(-10px); /* Slight lift effect */ |
211 | | - box-shadow: 0 10px 20px var(--color-shadow); |
212 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
213 | | -} |
214 | | - |
215 | | -/* CPU usage */ |
216 | | -.card.bg-cpu-usage:hover { |
217 | | - transform: translateX(-10px); /* Slight lift effect */ |
218 | | - box-shadow: 0 10px 20px var(--color-cpu-usage); |
219 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
220 | | -} |
221 | | - |
222 | | -/* Memory usage */ |
223 | | -.card.bg-memory:hover { |
224 | | - transform: translateZ(-10px); /* Slight lift effect */ |
225 | | - box-shadow: 0 10px 20px var(--color-memory); |
226 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
227 | | -} |
228 | | - |
229 | | -/* Disk usage */ |
230 | | -.card.bg-disk:hover { |
231 | | - transform: translateY(-10px); /* Slight lift effect */ |
232 | | - box-shadow: 0 10px 20px var(--color-disk); |
233 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
234 | | -} |
235 | | - |
236 | | -/* Uptime */ |
237 | | -.card.bg-uptime:hover { |
238 | | - transform: translateX(-10px); /* Slight lift effect */ |
239 | | - box-shadow: 0 10px 20px var(--color-uptime); |
240 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
241 | | -} |
242 | | - |
243 | | -/* Network statistics */ |
244 | | -.card.bg-network:hover { |
245 | | - transform: translateY(-10px); /* Slight lift effect */ |
246 | | - box-shadow: 0 10px 20px var(--color-network); |
247 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
248 | | -} |
249 | | - |
250 | | -/* Speedtest */ |
251 | | -.card.bg-speedtest:hover { |
252 | | - transform: translateZ(-10px); /* Slight lift effect */ |
253 | | - box-shadow: 0 10px 20px var(--color-speedtest); |
254 | | - transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ |
255 | | -} |
256 | | - |
257 | | - |
258 | | - |
0 commit comments