Skip to content

Commit df611c9

Browse files
shadabshaukatshadabshaukat
authored
Merge pull request #14 from shadab-mohammad-oracle/patch-5
Create style.css
2 parents b59275a + 8aadc26 commit df611c9

File tree

1 file changed

+224
-0
lines changed

1 file changed

+224
-0
lines changed

‎app/static/style.css

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
html, body {
2+
background: #f9fafa;
3+
color: #353535;
4+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
height: 100%;
8+
min-height: 100vh;
9+
}
10+
main {
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
min-height: 96vh;
15+
}
16+
.minimal-form {
17+
background: #fff;
18+
max-width: 370px;
19+
margin: 4vh auto 0 auto;
20+
border-radius: 18px;
21+
padding: 2.4em 2em 1.4em 2em;
22+
box-sizing: border-box;
23+
box-shadow: none;
24+
border: 1.5px solid #ececec;
25+
display: flex;
26+
flex-direction: column;
27+
gap: 1em;
28+
}
29+
.minimal-title {
30+
font-size: 1.35rem;
31+
font-weight: 600;
32+
margin: 0 0 0.6em 0;
33+
color: #212629;
34+
letter-spacing: 0.01em;
35+
text-align: center;
36+
}
37+
.minimal-group {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 0.18em;
41+
margin-bottom: 0.75em;
42+
}
43+
.minimal-group label {
44+
font-size: 0.98rem;
45+
color: #2d3034;
46+
margin-bottom: 2.5px;
47+
font-weight: 400;
48+
letter-spacing: 0.03em;
49+
}
50+
.minimal-group input,
51+
.minimal-group select {
52+
font-size: 1.02rem;
53+
padding: 9px 10px;
54+
border-radius: 6px;
55+
border: 1.2px solid #d4d4d4;
56+
background: #f7f7fa;
57+
outline: none;
58+
margin-bottom: 0.1em;
59+
font-family: inherit;
60+
font-weight: 410;
61+
color: #353535;
62+
transition: border-color 0.16s;
63+
}
64+
.minimal-group input:focus,
65+
.minimal-group select:focus {
66+
border-color: #34aaff;
67+
background: #fafdff;
68+
}
69+
.minimal-fields {
70+
gap: 0;
71+
padding: 0;
72+
display: flex;
73+
flex-direction: column;
74+
}
75+
.minimal-row,
76+
.minimal-row-tight {
77+
display: flex;
78+
flex-direction: column;
79+
gap: 0;
80+
margin-top: 0.18em;
81+
margin-bottom: 0.18em;
82+
}
83+
@media (max-width: 640px) {
84+
.minimal-form {
85+
max-width: 98vw;
86+
padding: 1.2em 0.7em 1em 0.7em;
87+
}
88+
.minimal-row, .minimal-row-tight { flex-direction: column; gap: 0.5em; }
89+
}
90+
.minimal-footer {
91+
display: flex;
92+
flex-direction: row;
93+
justify-content: center;
94+
gap: 1em;
95+
margin-top: 1.3em;
96+
}
97+
98+
.minimal-btn {
99+
appearance: none;
100+
border: none;
101+
font: inherit;
102+
background: #ededed;
103+
color: #212629;
104+
padding: 0.67em 1.27em;
105+
border-radius: 8px;
106+
font-size: 1.02rem;
107+
font-weight: 500;
108+
cursor: pointer;
109+
transition: background 0.15s, color 0.15s;
110+
box-shadow: none;
111+
letter-spacing: 0.01em;
112+
}
113+
.minimal-btn:focus {
114+
outline: 2px solid #34aaff;
115+
background: #f6fafd;
116+
}
117+
.minimal-btn:hover,
118+
.minimal-btn:active {
119+
background: #e3f3ff;
120+
color: #0366d6;
121+
}
122+
.minimal-btn-secondary {
123+
background: #fff;
124+
color: #222;
125+
border: 1.3px solid #e0e3e4;
126+
}
127+
.minimal-btn-secondary:hover {
128+
background: #f3f3f4;
129+
color: #176dc0;
130+
}
131+
132+
::-webkit-input-placeholder { color: #b8b9ba; }
133+
::-moz-placeholder { color: #b8b9ba; }
134+
:-ms-input-placeholder { color: #b8b9ba; }
135+
::placeholder { color: #b8b9ba; }
136+
137+
/* Modal result window */
138+
.modal-bg {
139+
position: fixed;
140+
top:0; left:0; right:0; bottom:0;
141+
background: rgba(33,38,41,0.26);
142+
display: flex;
143+
align-items: center;
144+
justify-content: center;
145+
z-index: 99;
146+
}
147+
.modal-content {
148+
background: #fff;
149+
border-radius: 17px;
150+
box-shadow: 0 8px 34px #2a335811;
151+
max-width: 680px;
152+
width: 98vw;
153+
padding: 2em 2em 1em 2em;
154+
position: relative;
155+
overflow-y: auto;
156+
max-height: 96vh;
157+
}
158+
.close-modal {
159+
position: absolute;
160+
top: 14px;
161+
right: 14px;
162+
background: transparent;
163+
color: #455;
164+
border: none;
165+
font-size: 1.5rem;
166+
cursor: pointer;
167+
font-weight: 600;
168+
}
169+
.modal-actions {
170+
display: flex;
171+
flex-direction: row;
172+
justify-content: flex-end;
173+
gap: 0.8em;
174+
margin: 1.2em 0 0.7em 0;
175+
}
176+
body.modal-open {
177+
overflow: hidden;
178+
}
179+
180+
/* Loader/progress styling */
181+
.loader {
182+
border: 3.5px solid #f3f3f3;
183+
border-top: 3.5px solid #3b76ef;
184+
border-radius: 50%;
185+
width: 32px;
186+
height: 32px;
187+
animation: spin 0.93s linear infinite;
188+
margin: 0 auto;
189+
}
190+
@keyframes spin {
191+
0% { transform: rotate(0deg);}
192+
100% { transform: rotate(360deg);}
193+
}
194+
progress {
195+
appearance: none;
196+
width: 94%;
197+
max-width: 340px;
198+
height: 9px;
199+
border-radius: 6px;
200+
margin-top: 9px;
201+
margin-bottom: 7px;
202+
background: #f1f6fa;
203+
box-shadow: none;
204+
}
205+
progress::-webkit-progress-bar {
206+
background: #f1f6fa;
207+
border-radius: 6px;
208+
}
209+
progress::-webkit-progress-value {
210+
background: #4dbae7;
211+
border-radius: 6px;
212+
}
213+
progress::-moz-progress-bar {
214+
background: #4dbae7;
215+
border-radius: 6px;
216+
}
217+
progress::-ms-fill {
218+
background: #4dbae7;
219+
border-radius: 6px;
220+
}
221+
.table-wrap {
222+
overflow-x: auto;
223+
}
224+
/* Basic table and summary alignment preserved from previous version */

0 commit comments

Comments
 (0)