Hugging Face's logo

Spaces:
edwixx
/
Life_expectancy_pred
Running

App Files Community
anurag sham kanade commited on
Commit
cd99f1b
•
1 Parent(s): bd92a5c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +197 -21
style.css CHANGED
@@ -1,28 +1,204 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
 
 
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
 
 
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
 
 
 
 
 
 
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
28
  }
 
1
+ :root {
2
+ --primary-color: #ff014f;
3
+ --secondary-color: #ecf0f3;
4
+ --secondary-color-b: #e4e4e4;
5
+ --primary-gradient: linear-gradient(145deg, #ff014f, #d11414);
6
+ --button-gradient: linear-gradient(145deg, #e2e8ec, #ffffff);
7
 
8
+ --text-c-link: #646c77;
9
+ --text-c-hover: #f8f9fa;
10
+ --light-text-c: #3c3e41;
11
+ --shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
12
+
13
+ --border-c: rgba(128, 128, 128, 0.5);
14
 
15
+ --ff: "Poppins", sans-serif;
16
+ --ff: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
17
+ --transition: 0.2s;
 
 
18
  }
19
+ :root {
20
+ --primary-color: #ff014f;
21
+ --secondary-color: #212428;
22
+ --secondary-color-b: #2e2e2e;
23
+ --primary-gradient: linear-gradient(145deg, #ff014f, #d11414);
24
+ --button-gradient: linear-gradient(145deg, #1e2024, #23272b);
25
 
26
+ --text-c-link: #96a3b6;
27
+ --text-c-hover: #f8f9fa;
28
+ --light-text-c: #e1e6ee;
29
+ --shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
30
+
31
+ --border-c: rgba(128, 128, 128, 0.5);
32
+
33
+ --ff: "Poppins", sans-serif;
34
+ --ff: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
35
+ --transition: 0.2s;
36
+ }
37
+ *,
38
+ *::before,
39
+ *::after {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+ .flex {
45
+ display: flex;
46
+ align-items: center;
47
+ }
48
+ ::-webkit-scrollbar {
49
+ width: 7px;
50
+ background-color: var(--secondary-color);
51
+ }
52
+ ::-webkit-scrollbar-thumb {
53
+ background-image: var(--primary-gradient);
54
+ border-radius: 100vw;
55
+ }
56
+ input::-webkit-outer-spin-button,
57
+ input::-webkit-inner-spin-button {
58
+ -webkit-appearance: none;
59
+ margin: 0;
60
+ }
61
+ input[type="number"] {
62
+ -moz-appearance: textfield;
63
+ }
64
+ ::selection {
65
+ background-color: var(--primary-color);
66
+ color: var(--light-text-c);
67
+ }
68
+ body {
69
+ flex-direction: column;
70
+ padding: 1rem 0;
71
+ justify-content: center;
72
+ align-items: flex-start;
73
+ background: repeating-linear-gradient(
74
+ 45deg,
75
+ var(--secondary-color-b) 0,
76
+ var(--secondary-color-b) 5%,
77
+ var(--secondary-color) 0,
78
+ var(--secondary-color) 50%
79
+ )
80
+ 0 / 10px 10px;
81
+ scroll-behavior: smooth;
82
+ }
83
+ .main-title {
84
+ color: var(--light-text-c);
85
+ font-family: var(--ff);
86
+ font-size: 3rem;
87
+ position: relative;
88
+ margin-bottom: 2rem;
89
+ font-weight: 700;
90
+ }
91
+ .heading {
92
+ width: calc(50vw + 10rem);
93
+ letter-spacing: 2px;
94
+ font-family: var(--ff);
95
+ color: var(--primary-color);
96
+ }
97
+ .nopage {
98
+ display: none;
99
+ }
100
+ .disable {
101
+ color: rgb(59, 59, 59) !important;
102
+ background-color: gray;
103
+ pointer-events: none;
104
+ }
105
+ .disable:focus {
106
+ outline: none;
107
+ }
108
+ .form .page {
109
+ flex-direction: column;
110
+ }
111
+ .form .page .field {
112
+ margin: 1rem;
113
+ align-items: flex-start;
114
+ flex-direction: column;
115
+ gap: 0.5rem;
116
+ }
117
+ select,
118
+ input {
119
+ color: var(--light-text-c);
120
+ z-index: 1;
121
+ width: calc(50vw + 10rem);
122
+ padding: 1rem 2rem;
123
+ margin: 0.4rem 0;
124
+ box-shadow: var(--shadow);
125
+ border: none;
126
+ background-image: var(--button-gradient);
127
+ border-radius: 5px;
128
+ font-family: var(--ff);
129
+ transition: var(--transition);
130
+ }
131
+ option {
132
+ background-color: var(--secondary-color);
133
+ }
134
+ button:focus,
135
+ input:focus,
136
+ select:focus,
137
+ button:hover,
138
+ select:hover,
139
+ input:hover {
140
+ outline: 2px solid var(--primary-color);
141
+ border-radius: 5px;
142
+ }
143
+ .button {
144
+ margin: 1rem;
145
+ padding: 1rem 2rem;
146
+ font-family: var(--ff);
147
+ border-radius: 6px;
148
+ transition: var(--transition);
149
+ position: relative;
150
+ color: var(--primary-color);
151
+ cursor: pointer;
152
+ font-weight: 500;
153
+ font-size: 1.1rem;
154
+ border: none;
155
+ }
156
+ .button::after {
157
+ box-shadow: var(--shadow);
158
+ border-radius: 6px;
159
+ content: "";
160
+ position: absolute;
161
+ height: 100%;
162
+ background-image: var(--button-gradient);
163
+ width: 100%;
164
+ top: 0;
165
+ z-index: -2;
166
+ left: 0;
167
+ }
168
+ .button::before {
169
+ box-shadow: var(--shadow);
170
+ border-radius: 6px;
171
+ content: "";
172
+ position: absolute;
173
+ height: 100%;
174
+ width: 100%;
175
+ background-image: var(--primary-gradient);
176
+ top: 0;
177
+ opacity: 0;
178
+ left: 0;
179
+ transition: var(--transition);
180
+ z-index: -1;
181
+ }
182
+ .button:hover {
183
+ transform: translateY(-4px);
184
+ color: var(--text-c-hover);
185
+ }
186
+ .button:hover::before {
187
+ opacity: 1;
188
+ }
189
+ .all-buttons {
190
+ justify-content: space-between;
191
+ }
192
+ .subButton {
193
+ width: fit-content !important;
194
  }
195
 
196
+ .result {
197
+ color: var(--light-text-c);
198
+ text-shadow: 0 0 10px var(--primary-color);
199
+ font-family: var(--ff);
200
+ font-size: 3rem;
201
+ position: relative;
202
+ margin: 2rem;
203
+ font-weight: 700;
204
  }