1- /* Basic Reset and Global Styles */
1+ /* Reset and Global Styles */
22* {
33 margin : 0 ;
44 padding : 0 ;
55 box-sizing : border-box;
66}
77
8- /* Container for Layout */
9- .controls-container {
10- display : flex;
11- align-items : center;
12- margin-bottom : 20px ;
8+ body {
9+ font-family : 'Roboto' , sans-serif;
10+ background-color : # f0f2f5 ;
11+ color : # 333 ;
1312}
1413
15- .controls-container select ,
16- .controls-container button {
17- margin-right : 10px ; /* Space between select and button */
14+ /* Layout Containers */
15+ .container {
16+ max-width : 1200px ;
17+ margin : 20px auto;
18+ padding : 20px ;
19+ background-color : # fff ;
20+ border-radius : 10px ;
21+ box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.1 );
22+ transition : transform 0.3s , box-shadow 0.3s ;
1823}
1924
25+ .container : hover {
26+ transform : translateY (-5px );
27+ box-shadow : 0 8px 16px rgba (0 , 0 , 0 , 0.15 );
28+ }
29+
30+ /* Page Title */
2031.page-title {
21- font-size : 2rem ;
22- margin-bottom : 20px ;
32+ font-size : 2.5rem ;
2333 color : # 333 ;
34+ margin-bottom : 30px ;
2435 text-align : center;
25- width : 100% ; /* Ensure it takes full width */
2636 display : flex;
27- justify-content : center; /* Center the text horizontally */
37+ justify-content : center;
38+ align-items : center;
2839}
2940
30- /* Style for Select Dropdown */
31- select {
32- padding : 10px ;
33- border : 1px solid # ddd ;
34- border-radius : 4px ;
35- font-size : 1rem ;
36- background-color : # fff ;
37- color : # 333 ;
38- transition : border-color 0.3s ;
41+ .page-title i {
42+ color : # 4caf50 ;
43+ margin-right : 10px ;
44+ transition : transform 0.3s ;
3945}
4046
41- select : hover ,
42- select : focus {
43- border-color : # 4caf50 ; /* Highlight on hover/focus */
44- outline : none;
47+ .page-title : hover i {
48+ transform : rotate (10deg );
4549}
4650
47- /* Style for Refresh Button */
51+ /* Buttons */
4852button {
49- padding : 10 px 20 px ;
53+ padding : 12 px 24 px ;
5054 border : none;
51- border-radius : 4 px ;
55+ border-radius : 6 px ;
5256 background-color : # 4caf50 ;
5357 color : # fff ;
5458 font-size : 1rem ;
@@ -69,64 +73,54 @@ button i {
6973 margin-right : 8px ;
7074}
7175
72- /* Container Styles for Charts */
73- .container {
74- max-width : 1200px ;
75- margin : 20px auto;
76- padding : 20px ;
76+ /* Select Dropdown */
77+ select {
78+ padding : 10px ;
79+ border : 1px solid # ddd ;
80+ border-radius : 6px ;
81+ font-size : 1rem ;
7782 background-color : # fff ;
78- border-radius : 8px ;
79- }
80-
81- .selector-container {
82- display : flex;
83- align-items : center; /* Align items vertically in the center */
84- gap : 1rem ; /* Space between the elements */
85- }
86-
87- .time-filter-container {
88- display : flex;
89- flex-direction : column; /* Stack label and select vertically */
90- }
91-
92- .time-filter-container label {
93- margin-bottom : 0.5rem ; /* Space between label and select */
83+ color : # 333 ;
84+ transition : border-color 0.3s , background-color 0.3s ;
9485}
9586
96- select {
97- padding : 0.5rem ; /* Add padding for better appearance */
98- border-radius : 0.25rem ; /* Rounded corners */
99- border : 1px solid # ccc ; /* Border color */
87+ select : hover ,
88+ select : focus {
89+ border-color : # 4caf50 ;
90+ background-color : # f9f9f9 ;
91+ outline : none;
10092}
10193
94+ /* Headings */
10295h2 {
103- font-size : 1.5rem ;
104- margin-bottom : 20px ;
96+ font-size : 2rem ;
10597 color : # 444 ;
98+ margin-bottom : 20px ;
10699 display : flex;
107100 align-items : center;
108101}
109102
110103h2 i {
111104 margin-right : 10px ;
112- color : # 4caf50 ; /* Icon color */
105+ color : # 4caf50 ;
113106}
114107
115- /* Chart Styles */
108+ /* Chart Canvas */
116109canvas {
117110 display : block;
118- height : 400px ;
119111 width : 100% ;
112+ height : 400px ;
120113 background-color : # f5f5f5 ;
121114 border-radius : 8px ;
122- box-shadow : 0 2px 4px rgba (0 , 0 , 0 , 0.1 );
115+ box-shadow : 0 2px 6px rgba (0 , 0 , 0 , 0.1 );
116+ margin-bottom : 30px ;
123117}
124118
125- /* Animation for Charts */
119+ /* Animation for Container and Chart Load */
126120.container {
127121 opacity : 0 ;
128- transform : translateY (20 px );
129- animation : fadeInUp 1 s forwards;
122+ transform : translateY (30 px );
123+ animation : fadeInUp 0.8 s ease-out forwards;
130124}
131125
132126@keyframes fadeInUp {
@@ -136,6 +130,34 @@ canvas {
136130 }
137131}
138132
133+ /* Controls */
134+ .controls-container {
135+ display : flex;
136+ align-items : center;
137+ justify-content : space-between;
138+ margin-bottom : 20px ;
139+ }
140+
141+ .controls-container select ,
142+ .controls-container button {
143+ margin-right : 10px ;
144+ }
145+
146+ .selector-container {
147+ display : flex;
148+ gap : 1rem ;
149+ align-items : center;
150+ }
151+
152+ .time-filter-container {
153+ display : flex;
154+ flex-direction : column;
155+ }
156+
157+ .time-filter-container label {
158+ margin-bottom : 0.5rem ;
159+ }
160+
139161/* Responsive Styles */
140162@media (max-width : 768px ) {
141163 .controls-container {
@@ -148,11 +170,111 @@ canvas {
148170 margin-bottom : 10px ;
149171 }
150172
173+ .page-title {
174+ font-size : 1.75rem ;
175+ }
176+
151177 h2 {
152- font-size : 1.25 rem ;
178+ font-size : 1.5 rem ;
153179 }
154180
155181 button {
156182 font-size : 0.875rem ;
157183 }
158184}
185+
186+ /* Improved Color Scheme */
187+ body {
188+ --primary-color : # 4caf50 ;
189+ --secondary-color : # 333 ;
190+ --background-color : # f0f2f5 ;
191+ --text-color : # 444 ;
192+ --light-bg : # fff ;
193+ --shadow-color : rgba (0 , 0 , 0 , 0.1 );
194+ --hover-color : # 45a049 ;
195+ --card-background : # f5f5f5 ;
196+ }
197+
198+ /* Apply Variables */
199+ body {
200+ background-color : var (--background-color );
201+ color : var (--text-color );
202+ }
203+
204+ .page-title i ,
205+ h2 i {
206+ color : var (--primary-color );
207+ }
208+
209+ .container {
210+ background-color : var (--light-bg );
211+ box-shadow : 0 4px 8px var (--shadow-color );
212+ }
213+
214+ button {
215+ background-color : var (--primary-color );
216+ }
217+
218+ button : hover {
219+ background-color : var (--hover-color );
220+ }
221+
222+ canvas {
223+ background-color : var (--card-background );
224+ }
225+
226+ /* Hover Animations */
227+ button : hover {
228+ background-color : var (--hover-color );
229+ transform : scale (1.05 );
230+ }
231+
232+ /* General Button Styles */
233+ button {
234+ padding : 10px 20px ; /* Adjust padding for a comfortable size */
235+ border : 2px solid transparent; /* Add border for better contrast */
236+ border-radius : 5px ; /* Slightly rounded corners for modern look */
237+ background-color : # 4caf50 ; /* Primary button background color (green) */
238+ color : white; /* Button text color */
239+ font-size : 1rem ; /* Base font size */
240+ cursor : pointer; /* Show pointer on hover */
241+ display : inline-flex; /* Align button content horizontally */
242+ align-items : center; /* Center icon and text vertically */
243+ justify-content : center; /* Center content */
244+ transition : background-color 0.3s , transform 0.3s ; /* Smooth transition on hover */
245+ margin-bottom : 10px ; /* Add space between buttons */
246+ }
247+
248+ /* Hover and Active States */
249+ button : hover {
250+ background-color : # 45a049 ; /* Darken background on hover */
251+ transform : scale (1.05 ); /* Slight zoom effect on hover */
252+ }
253+
254+ button : active {
255+ transform : scale (0.98 ); /* Slight shrink effect on click */
256+ }
257+
258+ /* Icon Spacing */
259+ button i {
260+ margin-right : 8px ; /* Space between icon and text */
261+ }
262+
263+ /* Style for Icon in Button */
264+ button i .fas {
265+ font-size : 1.2rem ; /* Adjust icon size */
266+ vertical-align : middle; /* Center the icon vertically */
267+ }
268+
269+ /* Custom Styles for Specific Buttons (Optional) */
270+ # refreshData , # refreshCpuTime , # refreshMemoryTime , # refreshBatteryTime ,
271+ # refreshNetworkTime , # refreshDashboardMemoryTime , # refreshCpuFrequencyTime ,
272+ # refreshCurrentTempTime {
273+ background-color : # 3498db ; /* Optional: Blue background for specific buttons */
274+ }
275+
276+ # refreshData : hover , # refreshCpuTime : hover , # refreshMemoryTime : hover , # refreshBatteryTime : hover ,
277+ # refreshNetworkTime : hover , # refreshDashboardMemoryTime : hover ,
278+ # refreshCpuFrequencyTime : hover , # refreshCurrentTempTime : hover {
279+ background-color : # 2980b9 ; /* Darker blue on hover for specific buttons */
280+ }
0 commit comments