Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
a86ed8b
·
verified ·
1 Parent(s): fdd77d0

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +38 -44
style.css CHANGED
@@ -13,36 +13,34 @@ body {
13
  height: 100vh;
14
  color: #333;
15
  position: relative;
16
- padding: 20px; /* Add padding for responsiveness */
17
  }
18
 
19
  .container {
20
  background: #ffffff;
21
- border-radius: 15px;
22
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
23
  padding: 40px;
24
- width: 100%;
25
- max-width: 400px; /* Limit max width for larger screens */
26
  text-align: center;
27
  position: relative;
28
- overflow: hidden; /* Prevents overflowing content */
29
  }
30
 
31
  h1 {
32
- font-size: 26px;
33
- margin-bottom: 20px;
34
  color: #2D3A3A;
35
- font-weight: 600;
36
  }
37
 
38
  input, select {
39
- padding: 14px;
40
- margin: 10px 0;
41
  width: 100%;
42
- font-size: 16px;
43
- border-radius: 8px;
44
- border: 1px solid #E0E0E0;
45
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
46
  transition: all 0.3s ease;
47
  }
48
 
@@ -54,42 +52,44 @@ input:focus, select:focus {
54
 
55
  .currency-selectors {
56
  display: flex;
57
- justify-content: center;
58
- align-items: center;
59
- gap: 10px;
60
  }
61
 
62
  span {
63
- font-size: 18px;
64
- font-weight: 500;
65
  color: #555;
66
  }
67
 
68
  button {
69
- padding: 12px 20px;
70
  background-color: #4CAF50;
71
  color: white;
72
  border: none;
73
- border-radius: 8px;
74
  width: 100%;
75
- font-size: 18px;
76
  font-weight: 600;
77
  cursor: pointer;
78
- transition: background-color 0.3s ease, transform 0.2s ease;
79
  }
80
 
81
  button:hover {
82
  background-color: #45a049;
83
- transform: scale(1.05);
 
 
 
 
84
  }
85
 
86
  #result {
87
- margin-top: 20px;
88
- font-size: 20px;
89
  font-weight: bold;
90
  color: #333;
91
  text-transform: uppercase;
92
- word-wrap: break-word;
93
  }
94
 
95
  /* Watermark dengan Copyright */
@@ -111,29 +111,23 @@ body::after {
111
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
112
  }
113
 
114
- /* Loading Indicator */
115
- .loading {
116
- display: none;
117
- font-size: 18px;
118
- color: #4CAF50;
119
- }
120
-
121
- .loading.show {
122
- display: block;
123
- }
124
-
125
- /* Responsiveness for smaller screens */
126
  @media (max-width: 768px) {
127
  .container {
128
- padding: 20px;
 
 
129
  }
 
130
  h1 {
131
- font-size: 22px;
132
  }
 
133
  input, select {
134
- font-size: 14px;
135
  }
 
136
  button {
137
- font-size: 16px;
138
  }
139
  }
 
13
  height: 100vh;
14
  color: #333;
15
  position: relative;
 
16
  }
17
 
18
  .container {
19
  background: #ffffff;
20
+ border-radius: 20px;
21
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
22
  padding: 40px;
23
+ width: 450px;
 
24
  text-align: center;
25
  position: relative;
26
+ max-width: 500px; /* Lebar maksimal di desktop */
27
  }
28
 
29
  h1 {
30
+ font-size: 30px;
31
+ margin-bottom: 25px;
32
  color: #2D3A3A;
33
+ font-weight: 700;
34
  }
35
 
36
  input, select {
37
+ padding: 15px;
38
+ margin: 12px 0;
39
  width: 100%;
40
+ font-size: 18px;
41
+ border-radius: 10px;
42
+ border: 1px solid #D1D1D1;
43
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
44
  transition: all 0.3s ease;
45
  }
46
 
 
52
 
53
  .currency-selectors {
54
  display: flex;
55
+ justify-content: space-between;
56
+ gap: 15px;
 
57
  }
58
 
59
  span {
60
+ font-size: 20px;
61
+ font-weight: 600;
62
  color: #555;
63
  }
64
 
65
  button {
66
+ padding: 15px 25px;
67
  background-color: #4CAF50;
68
  color: white;
69
  border: none;
70
+ border-radius: 10px;
71
  width: 100%;
72
+ font-size: 20px;
73
  font-weight: 600;
74
  cursor: pointer;
75
+ transition: background-color 0.3s ease, transform 0.2s;
76
  }
77
 
78
  button:hover {
79
  background-color: #45a049;
80
+ transform: translateY(-2px); /* Efek hover tombol */
81
+ }
82
+
83
+ button:active {
84
+ transform: translateY(0); /* Efek tombol ketika ditekan */
85
  }
86
 
87
  #result {
88
+ margin-top: 30px;
89
+ font-size: 24px;
90
  font-weight: bold;
91
  color: #333;
92
  text-transform: uppercase;
 
93
  }
94
 
95
  /* Watermark dengan Copyright */
 
111
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
112
  }
113
 
114
+ /* Media Query untuk Layar Lebih Kecil */
 
 
 
 
 
 
 
 
 
 
 
115
  @media (max-width: 768px) {
116
  .container {
117
+ padding: 30px;
118
+ width: 100%;
119
+ max-width: 100%;
120
  }
121
+
122
  h1 {
123
+ font-size: 24px;
124
  }
125
+
126
  input, select {
127
+ font-size: 16px;
128
  }
129
+
130
  button {
131
+ font-size: 18px;
132
  }
133
  }