Hugging Face's logo

Spaces:
GarGerry
/
Ujicobaconvert
Running

App Files Community
GarGerry commited on
Commit
502b5d6
·
verified ·
1 Parent(s): a077f4c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +47 -93
style.css CHANGED
@@ -1,118 +1,72 @@
1
- /* Global Reset */
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- box-sizing: border-box;
6
- font-family: Arial, sans-serif;
7
- }
8
-
9
  body {
10
- background-color: #f4f4f9;
11
- display: flex;
12
- flex-direction: column;
13
- align-items: center;
14
- justify-content: center;
15
- height: 100vh;
16
- text-align: center;
17
- color: #333;
18
- }
19
-
20
- /* Header */
21
- header {
22
- background-color: #2d3e50;
23
- width: 100%;
24
- padding: 20px;
25
- color: #fff;
26
- text-align: center;
27
  }
28
 
29
- header .logo {
30
- font-size: 36px;
31
- font-weight: bold;
 
 
 
 
32
  }
33
 
34
- header h1 {
35
- margin-top: 10px;
36
- font-size: 28px;
37
  }
38
 
39
- header p {
40
- font-size: 16px;
41
- margin-top: 5px;
42
  }
43
 
44
- /* Main Content */
45
- main {
46
- margin-top: 30px;
47
- width: 100%;
48
- max-width: 600px;
49
- padding: 20px;
50
- background-color: #fff;
51
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
52
- border-radius: 8px;
53
  }
54
 
55
- .converter-container {
56
- display: flex;
57
- flex-direction: column;
58
- align-items: center;
59
  }
60
 
61
- input[type="number"], select {
62
- width: 100%;
63
- padding: 10px;
64
- margin: 10px 0;
65
- border: 1px solid #ddd;
66
- border-radius: 4px;
67
- font-size: 16px;
68
  }
69
 
70
  button {
71
- width: 100%;
72
- padding: 12px;
73
- background-color: #2d3e50;
74
- color: #fff;
75
- border: none;
76
- border-radius: 4px;
77
- font-size: 16px;
78
- cursor: pointer;
79
- margin-top: 10px;
80
  }
81
 
82
  button:hover {
83
- background-color: #3c4e64;
84
  }
85
 
86
- /* Swap Button */
87
- #swap-btn {
88
- width: auto;
89
- background-color: transparent;
90
- color: #2d3e50;
91
- font-size: 18px;
92
- cursor: pointer;
93
- padding: 10px 20px;
94
- border: 1px solid #2d3e50;
95
- margin: 20px 0;
96
- }
97
-
98
- #swap-btn:hover {
99
- background-color: #2d3e50;
100
- color: #fff;
101
- }
102
-
103
- /* Result Display */
104
  #result {
105
- margin-top: 20px;
106
- font-size: 18px;
107
- font-weight: bold;
108
- color: #2d3e50;
109
  }
110
 
111
- /* Footer */
112
  footer {
113
- margin-top: 50px;
114
- padding: 20px;
115
- background-color: #2d3e50;
116
- color: #fff;
117
- width: 100%;
118
- te
 
1
+ /* General styling */
 
 
 
 
 
 
 
2
  body {
3
+ font-family: Arial, sans-serif;
4
+ background-color: #121212;
5
+ color: white;
6
+ margin: 0;
7
+ padding: 0;
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ height: 100vh;
 
 
 
 
 
 
 
 
12
  }
13
 
14
+ .container {
15
+ background-color: #1e1e1e;
16
+ padding: 20px;
17
+ border-radius: 10px;
18
+ width: 100%;
19
+ max-width: 600px;
20
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
21
  }
22
 
23
+ header {
24
+ text-align: center;
25
+ margin-bottom: 20px;
26
  }
27
 
28
+ h1 {
29
+ color: white;
 
30
  }
31
 
32
+ p {
33
+ color: #a1a1a1;
 
 
 
 
 
 
 
34
  }
35
 
36
+ .converter {
37
+ text-align: center;
 
 
38
  }
39
 
40
+ input, select {
41
+ padding: 10px;
42
+ margin: 10px 0;
43
+ width: 100%;
44
+ border-radius: 5px;
45
+ border: 1px solid #ddd;
 
46
  }
47
 
48
  button {
49
+ background-color: #4CAF50;
50
+ color: white;
51
+ padding: 10px 20px;
52
+ border: none;
53
+ border-radius: 5px;
54
+ cursor: pointer;
55
+ margin-top: 10px;
 
 
56
  }
57
 
58
  button:hover {
59
+ background-color: #45a049;
60
  }
61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  #result {
63
+ margin-top: 20px;
64
+ font-size: 1.2em;
 
 
65
  }
66
 
 
67
  footer {
68
+ text-align: center;
69
+ margin-top: 20px;
70
+ font-size: 0.9em;
71
+ color: #a1a1a1;
72
+ }