CoCalc -- style.css

GitHub Repository: titaniumnetwork-dev/Incognito-old
Path: blob/main/static/src/gs/public/hextris/style/style.css
¹³²⁵ views
1
* {
2
	-webkit-touch-callout:none;
3
	-webkit-user-select:none;
4
	-khtml-user-select:none;
5
	-moz-user-select:none;
6
	-ms-user-select:none;
7
	user-select:none;
8
	padding:0;
9
	margin:0;
10
	-webkit-tap-highlight-color:rgba(0,0,0,0);
11
}
12
#HIGHSCORE {
13
	position:absolute;
14
	left:50%;
15
	width:250px;
16
	overflow:visible;
17
	margin-left:-175px;
18
	font-family:Exo;
19

20
}
21
#container {
22
	color:#232323;
23
	position:absolute;
24
	left:50%;
25
	top:calc(50%);
26
	text-align:center;
27
	transform:translate(-50%, -50%);
28
	font-family:Exo;
29
	-webkit-transform:translate(-50%, -50%);
30
	-moz-transform:translate(-50%, -50%);
31
	-ms-transform:translate(-50%, -50%);
32
    display:none;
33
}
34
.tweet {
35
	font-size:2rem;
36
	color:#4099FF;
37
}
38
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
39
	.tweet{
40
		font-size:1rem;
41
	}
42
}
43
a {
44
	color:#232323;
45
}
46
.navbar {
47
	width:80%;
48
	margin:0 auto;
49
	padding:2.5vmin 0;
50
	text-align:center;
51
}
52
.navbar li {
53
	display:inline-block;
54
	text-align:center;
55
	width:calc(33% - 1.25vmin);
56
}
57

58
#title {
59
	color:#ecf0f1;
60
	font-size:6vmin;
61
}
62

63
#score {
64
	font-size:4vmin;
65
	text-align:center;
66
	width:30%;
67
}
68

69
#highscores {
70
	text-align:center;
71
	list-style:none;
72
}
73

74
.not-visible {
75
	display:none;
76
}
77

78
button {
79
	color:#ecf0f1;
80
	background-color:rgba(0,0,0,0);
81
	border:0;
82
}
83

84
button:focus {
85
	outline:0;
86
}
87

88
#openSideBar {
89
	position:fixed;
90
	margin-top:6px;
91
	width:72px;
92
	height:72px;
93
	margin-left:11px;
94
	z-index:3003;
95
	color:#232323;
96
	cursor:pointer;
97
	top:0;
98
	left:0;
99

100
}
101

102

103
#pauseBtn {
104
	display:none;
105
	position:fixed;
106
	margin-bottom:7px;
107
	width:72px;
108
	height:72px;
109
	margin-right:11px;
110
	z-index:3000;
111
	color:#232323;
112
	cursor:pointer;
113
	right:0;
114
	bottom:0;
115
	z-index:99;
116
}
117

118
#restartBtn {
119
	display:none;
120
	position:fixed;
121
	margin-bottom:7px;
122
	width:72px;
123
	height:72px;
124
	margin-left:11px;
125
	z-index:3000;
126
	color:#232323;
127
	cursor:pointer;
128
	bottom:0;
129
	z-index:99;
130
}
131
#startBtn {
132
	position:absolute;
133
	left:40%;
134
	top:38%;
135
	height:25%;
136
	width:25%;
137
	z-index:99999999;
138
	cursor:pointer;
139
}
140

141
#helpScreen {
142
	height:100%;
143
	width:100%;
144
	z-index:3001;
145
	position:fixed;
146
	top:0;
147
	margin:0;
148
	font-size:15px;
149
	text-align:center;
150
	display:none;
151
	color:#232323;
152
	background-color:rgba(236,240,241,1);
153
}
154

155
#colorBlindBtn {
156
	position:absolute;
157
	width:120px;
158
	height:20px;
159
	z-index:9999;
160
	left:47%;
161
	top:65%;
162
	font-size:15px;
163
	text-align:center;
164
	color:#232323;
165
	cursor:pointer;
166
}
167

168
#inst_main_body {
169
	padding:0px;
170
	font-size:1.2em;
171
	left:50%;
172
	top:50%;
173
	position: absolute;
174
	text-align:left;
175
	max-width:400px;
176
	/*margin-top:30px;*/
177
	transform:translate(-50%, -50%);
178
	-webkit-transform:translate(-50%, -50%);
179
	-moz-transform:translate(-50%, -50%);
180
	-ms-transform:translate(-50%, -50%);
181
}
182

183
#inst_main_body > a {
184
	font-weight:bold;
185
}
186

187
#inst_main_body > hr {
188
	width:100%;
189
	color:#232323;
190
	background-color:#232323;
191
	height:1px;
192
	border:0;
193
}
194

195
#inst_main_body > p {
196
	margin-bottom:15px;
197
}
198

199
#instructions_head {
200
	text-align:center;
201
	font-size:1.5em;
202
	padding-bottom:4px;
203
}
204

205

206
#highScoreInGameTextHeader {
207
	color: #bdc3c7;
208
	width:100%;
209
}
210

211
#highScoreInGameText {
212
	position: absolute;
213
	top:10px;
214
	text-align: center;
215
	width:200px;
216
	left:50%;
217
	margin-left:-100px;
218
}
219

220
#currentHighScore {
221
	color: #2c3e50;
222
	width:100%;
223
	margin-top: -5px;
224
	font-size:2em;
225
}
226

227
@media only screen and (max-device-width:480px) {
228
	#helpScreen {
229
		position:fixed;
230
		top:2px;
231
		padding-top:20px;
232
		margin:0;
233
		width:100%;
234
		height:100%;
235
		font-size:13px;
236
		text-align:center;
237
	}
238
	#inst_main_body {
239
		width:calc(100% - 70px);
240
		transform:translate(-50%, -50%);
241
		-webkit-transform:translate(-50%, -50%);
242
		-moz-transform:translate(-50%, -50%);
243
		-ms-transform:translate(-50%, -50%);
244
	}
245
	#instructions_head {
246
		padding-left:0%;
247
	}
248
	#openSideBar{
249
		width:60px;
250
		height:60px;
251
	}
252
	#pauseBtn {
253
		width:60px;
254
		height:60px;
255
	}
256
	#restartBtn {
257
		width:60px;
258
		height:60px;
259
	}
260
}
261

262
.overlay {
263
	position:absolute;
264
	height:20%;
265
	width:100%;
266
	left:50%;
267
	top:50%;
268
	margin-left:-50%;
269
	margin-top:-10%;
270
	z-index:3000;
271
	color:#232323;
272
	text-align:center;
273
}
274

275
.helpText {
276
	z-index:3001;
277
}
278

279
.centeredHeader {
280
	font-size:5vw; 
281
	text-align:center;
282
	line-height:4rem;
283
}
284

285
.centeredSubHeader {
286
	font-size:2.2rem; 
287
	line-height:1em;
288
	text-align:center;
289
}
290

291
.centeredSubSubHeader {
292
	font-size:1.4rem; 
293
	text-align:center;
294
}
295

296
#buttonCont {
297
	position:absolute; 
298
	left:50%;
299
	width:310px;
300
	margin-left:-8px;
301
	transform:translate(-50%, 0%);
302
	-webkit-transform:translate(-50%, 0%);
303
	-moz-transform:translate(-50%, 0%);
304
	-ms-transform:translate(-50%, 0%);
305
}
306

307
@media only screen and (orientation:landscape) {
308
	#buttonCont {
309
		bottom:calc(50vh - 19vh - 36px);
310
	}
311
	#container {
312
		top:calc(50vh - 11vh);
313
	}
314
}
315

316
@media only screen and (orientation:portrait) {
317
	#buttonCont {
318
		bottom:calc(50vh - 19vw - 36px);
319
	}
320
	#container {
321
		top:calc(50vh - 11vw);
322
	}
323
}
324

325
@media only screen and (min-device-width:320px) and (max-device-width:600px) {
326
	.centeredHeader {
327
		font-size:2rem; 
328
		text-align:center;
329
		line-height:0.6rem;
330
	}
331

332
	.centeredSubHeader {
333
		font-size:1rem; 
334
		text-align:center;
335
	}
336

337
	.overlay {
338
		margin-top:-20%;
339
	}
340

341
	#buttonCont {
342
		width:280px;
343
	}
344

345
	@media only screen and (orientation:landscape) {
346
		#buttonCont {
347
			bottom:119px;
348
		}
349
	}
350

351
	@media only screen and (orientation:portrait) {
352
		#buttonCont {
353
			bottom:119px;
354
		}
355
	}
356
}
357
.blur {
358
	opacity:0.1;
359
}
360

361
* {
362
	padding:0;
363
	margin:0;
364
}
365

366
body {
367
	color:#ecf0f1;
368
	font-family:'Exo', sans-serif;
369
	background-color:#ecf0f1;
370
}
371

372
#clickToExit {
373
	cursor:pointer;
374
}
375

376
#canvas {
377
	transition:all 0.5s ease;
378
	position:absolute;
379
	left:0;
380
	right:0;
381
	height:100%;
382
	width:100%;
383
	background-color:#ecf0f1;
384
	z-index:0;
385
}
386
#title {
387
	z-index:99;
388
	margin-top:20px;
389
	color:#2c3e50;
390
}
391

392
#gameoverscreen {
393
	/*display:none;*/
394
}
395

396
#restart{
397
	display:none;
398
	cursor:pointer !important;
399
	margin:0;
400
	padding:0;
401
	bottom:15px;
402
	position:absolute;
403
	left:calc(50% - 124px);
404
	transform:translate(-50%, 0%);
405
	-webkit-transform:translate(-50%, 0%);
406
	-moz-transform:translate(-50%, 0%);
407
	-ms-transform:translate(-50%, 0%);
408
	margin-bottom:-3.5px;
409
}
410

411
#socialShare{
412
	display:none;
413
	margin:0;
414
	padding:0;
415
	bottom:0;
416
	margin-bottom: 6.5px;
417
	position:absolute;
418
	left:calc(50% + 30px);
419
	transform:translate(-50%, 0%);
420
	-webkit-transform:translate(-50%, 0%);
421
	-moz-transform:translate(-50%, 0%);
422
	-ms-transform:translate(-50%, 0%);
423
    padding-bottom: 2px;
424
}
425

426
.unselectable {
427
	-webkit-touch-callout:none;
428
	-webkit-user-select:none;
429
	-khtml-user-select:none;
430
	-moz-user-select:none;
431
	-ms-user-select:none;
432
	user-select:none;
433
}
434
#afterhr {
435
	margin:0;
436
	padding:0;
437
	margin-bottom:-10px;
438
	padding-bottom:-10px;
439
}
440
body {
441
	overflow:hidden;
442
}
443
#gameoverscreen {
444
	padding:8px;
445
}
446
@font-face {
447
	font-family:Exo;
448
	font-weight:light;
449
	src:url("./fonts/Exo2-ExtraLight.otf") format("opentype");
450
}
451

452
@font-face {
453
	font-family:Exo;
454
	src:url("./fonts/Exo2-Regular.otf") format("opentype");
455
}
456

457
@font-face {
458
	font-family:Exo;
459
	font-weight:bold;
460
	src:url("./fonts/Exo2-SemiBold.otf") format("opentype");
461
}
462

463
.GOTitle {
464
	font-weight:bold;
465
	font-size:24.2000px;
466
}
467

468
.scoreNum {
469
	font-weight:normal ! important;
470
}
471

472
#cScore {
473
	font-size:60.5000px;
474
	font-weight:light;
475
	margin-bottom:5px;
476
	margin-top:-10px;
477
}
478

479
#highScoresTitle {
480
	margin-bottom:2px;
481
}
482

483
.score {
484
	font-weight:light;
485
	line-height:18px;
486
}
487

488

489

490

491
#bottomContainer {
492
	position:absolute;
493
	width:100%;
494
	bottom:0px;
495
}
496

497
#androidBadge {
498
	position:absolute;
499
	height:41px;
500
	margin-top:5px;
501
	left:calc(50% - 66px);
502
	transform:translate(calc(-50% - 4px), -1px);
503
	-webkit-transform:translate(calc(-50% - 4px), -1px);
504
	-moz-transform:translate(calc(-50% - 4px), -1px);
505
	-ms-transform:translate(calc(-50% - 4px), -1px);
506
}
507

508
#iOSBadge {
509
	margin-top:5px;
510
	position:absolute;
511
	left:calc(50% + 65px);
512
	transform:translate(calc(-50% - 4px), 0%);
513
	-webkit-transform:translate(calc(-50% - 4px), 0%);
514
	-moz-transform:translate(calc(-50% - 4px), 0%);
515
	-ms-transform:translate(calc(-50% - 4px), 0%);
516
}
517

518
#authors {
519
	position:absolute;
520
	width:200px;
521
	bottom:0px;
522
	left:50%;
523
	transform:translate(-50%, 0%);
524
	-webkit-transform:translate(-50%, 0%);
525
	-moz-transform:translate(-50%, 0%);
526
	-ms-transform:translate(-50%, 0%);
527
}
528

529
Product

Resources

Company
