@@ -97,6 +97,7 @@ outline: none;
97
97
margin-top : 10px ;
98
98
margin-right : 10px ;
99
99
background : none;
100
+ box-shadow : none;
100
101
margin-top : 0 ;
101
102
}
102
103
@@ -106,13 +107,14 @@ outline: none;
106
107
margin : 0 ;
107
108
display : flex;
108
109
justify-content : flex-end;
110
+ margin-top : calc (3vh - 8px );
109
111
}
110
112
111
113
.title {
112
114
color : white;
113
115
position : absolute;
114
- left : 40 px ;
115
- top : 20 px ;
116
+ left : calc ( 3 vh + 50 px ) ;
117
+ top : 3 vh ;
116
118
margin : 0 ;
117
119
font-size : 25px ;
118
120
z-index : 2 ;
@@ -121,8 +123,21 @@ outline: none;
121
123
# header ul li {
122
124
font-size : 20px ;
123
125
color : # f5f5f5 ;
124
- margin : 5px 20px ;
126
+ padding : 10px 30px ;
127
+ border-radius : 25px ;
128
+ margin : 5px ;
125
129
cursor : pointer;
130
+ transition : all 100ms linear;
131
+ line-height : 100% ;
132
+ }
133
+
134
+ # header ul li : hover {
135
+ background-color : rgba (57 , 255 , 216 , 0.8 );
136
+ }
137
+
138
+ nav # header ul a {
139
+ line-height : 100% ;
140
+ padding : 0 ;
126
141
}
127
142
128
143
# main {
@@ -135,6 +150,7 @@ outline: none;
135
150
flex-direction : column;
136
151
color : white;
137
152
font-size : 16px ;
153
+ padding : 25px 15px ;
138
154
sizing : expand;
139
155
}
140
156
@@ -148,7 +164,7 @@ outline: none;
148
164
top : 10px ;
149
165
right : 10px ;
150
166
min-height : 83vh ;
151
- border-radius : 10 px ;
167
+ border-radius : 20 px ;
152
168
}
153
169
/* #main > nav {
154
170
background: #D7E8D4;
@@ -169,19 +185,24 @@ outline: none;
169
185
button {
170
186
outline : none;
171
187
font-size : 20px ;
172
- padding : 0 px 20px ;
188
+ padding : 15 px 20px ;
173
189
width : 15vw ;
174
- min-height : 7vh ;
190
+ /* min-height: 7vh; */
175
191
display : flex;
176
192
align-items : center;
177
193
justify-content : center;
178
194
color : whitesmoke;
179
195
background-color : # 0d0a26 ;
180
196
border : 0.5px solid whitesmoke;
181
- border-radius : 5 px ;
197
+ border-radius : 50 px ;
182
198
margin : 10px 0 ;
183
199
cursor : pointer;
184
200
margin-right : 20px ;
201
+ transition : all 100ms linear;
202
+ }
203
+
204
+ button : hover {
205
+ background-color : rgba (57 , 255 , 216 , 0.8 );
185
206
}
186
207
187
208
button : focus {
@@ -207,7 +228,7 @@ header, footer, .left,.right {
207
228
208
229
.language {
209
230
height : 7vh ;
210
- margin : 10 px 0 ;
231
+ margin : 0 0 5 px 0 ;
211
232
}
212
233
213
234
# langSelect {
@@ -225,17 +246,19 @@ header, footer, .left,.right {
225
246
226
247
.select-wrapper input .select-dropdown {
227
248
color : whitesmoke !important ;
249
+ padding : 0 20px !important ;
250
+ box-sizing : border-box !important ;
228
251
}
229
252
230
253
.editor {
231
254
height : 36vh ;
232
255
}
233
256
234
257
.editor textarea {
235
- padding : 10 px ;
258
+ padding : 20 px ;
236
259
width : 100% ;
237
260
height : 100% ;
238
- border-radius : 10 px ;
261
+ border-radius : 20 px ;
239
262
resize : none;
240
263
box-sizing : border-box;
241
264
font-family : 'Montserrat' , sans-serif;
@@ -253,10 +276,10 @@ textarea:focus {
253
276
}
254
277
255
278
# compilerOutput {
256
- padding : 10 px ;
279
+ padding : 20 px ;
257
280
width : 100% ;
258
281
height : 100% ;
259
- border-radius : 10 px ;
282
+ border-radius : 20 px ;
260
283
font-family : 'Montserrat' , sans-serif;
261
284
box-sizing : border-box;
262
285
color : white;
@@ -293,20 +316,53 @@ textarea:focus {
293
316
294
317
}
295
318
319
+ .leaderboard-icon {
320
+ padding : 20px ;
321
+ position : absolute;
322
+ bottom : 10px ;
323
+ left : 15px ;
324
+ cursor : pointer;
325
+ background : black;
326
+ border : 0.5px solid whitesmoke;
327
+ border-radius : 50% ;
328
+ display : flex;
329
+ }
330
+
331
+ .leaderboard-icon .material-icons {
332
+ font-size : 24px ;
333
+ /* transform: scale(1.2); */
334
+ color : white;
335
+ }
336
+
337
+ .leaderboard {
338
+ height : 75vh ;
339
+ width : 90vh ;
340
+ background : black;
341
+ border : 0.5px solid whitesmoke;
342
+ border-radius : 20px ;
343
+ position : absolute;
344
+ bottom : 13vh ;
345
+ left : 15px ;
346
+ padding : 20px ;
347
+ display : none;
348
+ overflow-y : scroll;
349
+ }
350
+
296
351
.scoreboard {
297
352
position : absolute;
298
353
display : flex;
299
354
justify-content : center;
300
355
align-items : center;
301
- left : 10 px ;
356
+ left : 100 px ;
302
357
bottom : 10px ;
303
- width : 20 vw ;
304
- height : 10 vh ;
358
+ width : auto ;
359
+ height : auto ;
305
360
background : black;
306
361
border : 0.5px solid whitesmoke;
307
- border-radius : 7 px ;
362
+ border-radius : 50 px ;
308
363
color : white;
309
364
font-size : 20px ;
365
+ padding : 10px 25px ;
310
366
}
311
367
312
368
.scoreboard > span {
@@ -324,14 +380,42 @@ textarea:focus {
324
380
color : # bbb ;
325
381
}
326
382
383
+ table {
384
+ color : white;
385
+ }
386
+
387
+ tr {
388
+ height : auto;
389
+ }
390
+
391
+ tr : nth-child (1 ) {
392
+ border-bottom : 1px solid white;
393
+ }
394
+
395
+ tr th {
396
+ padding : 15px 5px ;
397
+ }
398
+
399
+ tr td {
400
+ padding : 10px 5px ;
401
+ }
402
+
403
+ tr td , tr th {
404
+ text-align : center;
405
+ }
406
+
407
+ .rank , .score {
408
+ width : 20px ;
409
+ }
410
+
327
411
/* Sidenav */
328
412
329
413
.hamburger {
330
414
cursor : pointer;
331
415
width : 28px ;
332
416
position : absolute;
333
- top : 20 px ;
334
- left : 5 px ;
417
+ top : 3 vh ;
418
+ left : 3 vh ;
335
419
z-index : 10 ;
336
420
}
337
421
.hamburger .line {
@@ -456,8 +540,8 @@ textarea:focus {
456
540
left : 50% ;
457
541
transform : translate (-50% , -50% );
458
542
background : white;
459
- width : 5 px ;
460
- height : 30 px ;
543
+ width : 4 px ;
544
+ height : 24 px ;
461
545
}
462
546
463
547
.h-line {
@@ -466,8 +550,8 @@ textarea:focus {
466
550
left : 50% ;
467
551
transform : translate (-50% , -50% );
468
552
background : white;
469
- width : 30 px ;
470
- height : 5 px ;
553
+ width : 24 px ;
554
+ height : 4 px ;
471
555
}
472
556
473
557
# sidenav ul {
@@ -483,23 +567,23 @@ textarea:focus {
483
567
display : flex;
484
568
align-items : center;
485
569
margin : 0 ;
486
- padding : 15px ;
487
- height : 15 vh ;
570
+ padding : 0 15px ;
571
+ height : 11 vh ;
488
572
width : 100% ;
489
573
box-sizing : border-box;
490
574
}
491
575
492
576
a {
493
- font-size : 17 px ;
494
- margin : 0 10px ;
577
+ font-size : 1.4 rem ;
578
+ margin-left : 10px ;
495
579
text-decoration : none;
496
580
color : white !important ;
497
581
transition : 0.2s ease-in-out;
498
582
cursor : pointer
499
583
}
500
584
501
- a : hover {
502
- border-bottom : 0.3 px solid whitesmoke ;
585
+ # header ul a li : hover {
586
+ background-color : rgba ( 255 , 40 , 0 , 1 ) ;
503
587
}
504
588
505
589
# codeInput {
0 commit comments