Преглед изворни кода

Upload files to 'public_html/style'

david.ortiz11 пре 4 година
родитељ
комит
f6ee1c2ad1
3 измењених фајлова са 1785 додато и 0 уклоњено
  1. 637
    0
      public_html/style/laboratory.css
  2. 281
    0
      public_html/style/login.css
  3. 867
    0
      public_html/style/main.css

+ 637
- 0
public_html/style/laboratory.css Прегледај датотеку

@@ -0,0 +1,637 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   laboratory.css
7
+    Description     :   Styling for laboratory/inventory pages */
8
+
9
+
10
+.main-form{
11
+	top: 0%;
12
+	opacity: 0;
13
+	width: 100%;
14
+	height: 100%;
15
+	text-align: center;
16
+	padding: 105px 0;
17
+	will-change: transform,opacity;
18
+	transform: translateY(-100%);
19
+  	will-change: transform, opacity;
20
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
21
+}
22
+
23
+.form-shader{
24
+	opacity: 0;
25
+	z-index: -1;
26
+	width: 100%;
27
+	height: 100%;
28
+	overflow: hidden;
29
+	text-align: center;
30
+	position: absolute;
31
+	background-color: rgb(0,0,0,0.85);
32
+	will-change: z-index,opacity;
33
+	transition: z-index 0.25s, opacity 0.25s ease-in-out;
34
+}
35
+
36
+.t-form{
37
+	display: none;
38
+}
39
+
40
+.c-form{
41
+	display: block !important;
42
+}
43
+.alert-shader{
44
+	width: 100%;
45
+	height: 100%;
46
+	z-index: 9998;
47
+	position: absolute;
48
+	background-color: rgb(0,0,0,0.25);	
49
+}
50
+
51
+.alert-wrapper{
52
+	opacity: 0;
53
+	z-index: -1;
54
+	width: 100%;
55
+	height: 100%;
56
+	position: absolute;
57
+	text-align: center;
58
+	will-change: opacity;
59
+	background-color: rgb(0,0,0,0.85);
60
+	/* transition: opacity 0.15s ease-in-out; */
61
+}
62
+
63
+.query-btn{
64
+	cursor: pointer;
65
+	padding: 0px 5px;
66
+	border-radius: 0px;
67
+	color: #202124;
68
+	border-bottom: 2px solid transparent;
69
+}
70
+.query-btn:hover{
71
+	color: #060606;
72
+	border-bottom: 2px solid #060606;
73
+	transition: border-bottom 0.5s ease-in-out;
74
+}
75
+
76
+.confirm-header{
77
+	text-align: left;
78
+	padding: 7.5px 15px;
79
+	background-color: #fff;
80
+	border-bottom: 1px solid rgb(218,220,224);
81
+}
82
+
83
+.submit-usage{
84
+	margin-top: 5%;
85
+	color: darkgray;
86
+}
87
+
88
+.confirm-alert{
89
+	top: 50%;
90
+	margin: auto;
91
+	height: 175px;
92
+	overflow: auto;
93
+	z-index: 9999;
94
+	color: #202124;
95
+	max-width: 300px;
96
+	position: relative;
97
+	border-radius: 2.5px;
98
+	display: inline-block;
99
+	background-color: #fff;
100
+	transform: translateY(-50%);
101
+	border: 1px solid rgb(218,220,224);
102
+}
103
+
104
+.query-actions{
105
+	right: 15px;
106
+	bottom: 15px;
107
+	position: absolute;
108
+}
109
+
110
+.mi-wrapper{
111
+	padding: 5px 15px;
112
+	display: inline-block;	
113
+}
114
+
115
+.confirm-message{
116
+	color: #202124;
117
+	text-align: left;
118
+}
119
+
120
+.form-wrapper{
121
+	width: 275px;
122
+	margin: auto;
123
+	z-index: 9999;
124
+	position: relative;
125
+	border-radius: 2.5px;
126
+	background-color: #fff;
127
+	border: 1px solid rgb(218,220,224);
128
+}
129
+
130
+.main-form{
131
+	top: 0%;
132
+	opacity: 0;
133
+	width: 100%;
134
+	height: 100%;
135
+	text-align: center;
136
+	padding: 105px 10% 15px;
137
+	will-change: transform,opacity;
138
+	transform: translateY(-100%);
139
+  	will-change: transform, opacity;
140
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
141
+}
142
+
143
+.actions-cell{
144
+    width: 150px;
145
+}
146
+
147
+.form-header{
148
+	float: left;
149
+	font-size: 20px;
150
+	color: #202124;
151
+	display: inline-block;
152
+	text-transform: capitalize;
153
+}
154
+
155
+.close-icon{
156
+	float: right;
157
+	cursor: pointer;
158
+	color: darkgray;
159
+	display: inline-block;
160
+}
161
+
162
+.form{
163
+	width: 100%;
164
+	text-align: center;	
165
+}
166
+
167
+.add-form,.edit-form{
168
+	top: 0%;
169
+	opacity: 0;
170
+	width: 100%;
171
+	height: 100%;
172
+	text-align: center;
173
+	position: absolute;
174
+	padding: 105px 10% 15px;
175
+	will-change: transform,opacity;
176
+	transform: translateY(-100%);
177
+  	will-change: transform, opacity;
178
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
179
+}
180
+
181
+.add-form-wrapper,.edit-form-wrapper{
182
+	border-radius: 2.5px;
183
+	background-color: #fff;
184
+	border: 1px solid rgb(218,220,224);
185
+}
186
+
187
+.add-form-body,.edit-form-body{
188
+	width: 100%;
189
+	overflow-y: auto;
190
+}
191
+
192
+.add-form-body-wrapper,.edit-form-body-wrapper{
193
+	width: 100%;
194
+}
195
+
196
+#add-submit,#edit-submit{
197
+	float: right;
198
+}
199
+
200
+.form-body{
201
+	padding: 7.5px 15px 0px;
202
+}
203
+
204
+.form-header-wrapper,.add-form-header-wrapper,.edit-form-header-wrapper{
205
+	width: 100%;
206
+	display: inline-block;
207
+	padding: 10px 15px 0px;
208
+	border-bottom: 1px solid rgb(218,220,224);
209
+}
210
+
211
+.li-wrapper{
212
+	width: 100%;
213
+	float: left;
214
+	margin-bottom: 1%;
215
+	display: inline-block;
216
+}
217
+
218
+.control-wrapper{
219
+	float: right;
220
+	text-align: left;
221
+	position: relative;
222
+	display: inline-block;
223
+}
224
+
225
+.text-field{
226
+	height: 30px;
227
+	width: 155px;
228
+	float: right;
229
+	padding: 7.5px;
230
+	color: #202124; 
231
+  	text-align: right;
232
+	position: relative;
233
+	border-radius: 2.5px;
234
+	margin-bottom: 7.5px;
235
+	display: inline-block;
236
+	background-color: #fff;
237
+	border: 1px solid rgb(218,220,224) !important;
238
+}
239
+
240
+.label{
241
+	float: left;
242
+	color: #202124;
243
+	font-size: 15px;
244
+	padding-right: 5px;
245
+	display: inline-block;
246
+	transform: translateY(25%);
247
+}
248
+
249
+.form-actions{
250
+	width: 100%;
251
+	padding: 0 15px 15px;
252
+	display: inline-block;
253
+}
254
+
255
+.person-name{
256
+	text-align: left;
257
+}
258
+
259
+.personnel-row:last-child td{
260
+	border-bottom: 0px solid rgb(34,40,45) !important;
261
+}
262
+
263
+.personnel,.personnel-wrapper{
264
+	width: 450px;
265
+
266
+}
267
+.personnel{
268
+	border-radius: 2.5px;
269
+	border: 1px solid rgb(52,53,54) !important;
270
+}
271
+
272
+.access-level{
273
+	text-transform: capitalize;
274
+}
275
+
276
+.transaction-label{
277
+	text-transform: capitalize;
278
+}
279
+
280
+.empty-field{
281
+  border: 1px solid #fd351d; 
282
+}
283
+
284
+.required-field{
285
+	color: rgb(255,70,70);
286
+}
287
+
288
+.fields-required{
289
+	display: none;
290
+	color: rgb(255,70,70);
291
+}
292
+
293
+.add-material{
294
+	float: left;
295
+	height: 31.25px;
296
+	font-size: 15px;
297
+	padding: 2.5px 7.5px;
298
+	display: inline-flex;
299
+	color: #202124;
300
+	border-radius: 2.5px !important;
301
+	background-color: #fff;
302
+	border: 1px solid rgb(218,220,224) !important;
303
+}
304
+
305
+.add-material:hover{
306
+	color: #202124;
307
+}
308
+
309
+.add-material-icon{
310
+	font-size: 13.25px;
311
+	transform: translateY(25%);
312
+}
313
+
314
+.add-text{
315
+	float: left;
316
+	margin-left: 7.5px;
317
+	transform: translateY(1.25px);
318
+}
319
+
320
+.add-li-wrapper,.edit-li-wrapper{
321
+	text-align: left;
322
+	position: relative;
323
+	margin-right: 15px;
324
+	display: inline-block;
325
+}
326
+
327
+.add-li-wrapper .text-field,.edit-li-wrapper .text-field{
328
+	height: 35px;
329
+	text-align: left;
330
+}
331
+
332
+.add-li-wrapper label,.edit-li-wrapper label{
333
+	display: block;
334
+	color: #202124;
335
+}
336
+
337
+.field-warning{
338
+	top: 50%;
339
+	right: 5.5%;
340
+	display: none;
341
+	position: absolute;
342
+	color: rgb(255,243,205);
343
+	transform: translateY(25%);
344
+}
345
+
346
+.material-input{
347
+	width: 100%;
348
+	height: 35px;
349
+	float: left;
350
+	color: #202124;
351
+	padding: 7.5px;
352
+	text-align: left;
353
+	position: relative;
354
+	border-radius: 5px;
355
+	margin-bottom: 15px;
356
+	display: inline-block;
357
+	background-color: #fff;
358
+	border: 1px solid rgb(218,220,224);
359
+}
360
+
361
+.add-material{
362
+	cursor: pointer;
363
+}
364
+
365
+.form-actions{
366
+	text-align: right;
367
+}
368
+
369
+.slide-right{
370
+	animation: slide-right 0.5s ease-in-out;
371
+	transform: translateX(0%);
372
+}
373
+
374
+.details{
375
+	float: left;
376
+	width: 100%;
377
+	text-align: left;
378
+	padding: 7.5px 15px;
379
+	display: inline-block;
380
+	border-top: 1px solid rgb(218,220,224);
381
+}
382
+
383
+.details:first-child{
384
+	border-top: none;
385
+}
386
+
387
+.details-header{
388
+	color: #202124;
389
+}
390
+
391
+.add-form-actions,.edit-form-actions{
392
+	width: 100%;
393
+	text-align: right;
394
+	display: inline-block;
395
+	padding: 15px 15px 7.5px;
396
+}
397
+
398
+.medium-field{
399
+	width: 25%;
400
+}
401
+
402
+.large-field{
403
+	width: 27.5%;
404
+}
405
+
406
+.small-field{
407
+	width: 6.25%;
408
+}
409
+
410
+.extra-small-field{
411
+	width: 3.5%;
412
+}
413
+
414
+.number-field{
415
+	width: 7.5%;
416
+}
417
+
418
+input[name=capacity],input[name=quantity]{
419
+	text-align: right;
420
+}
421
+
422
+input[name=state],input[name=type]{
423
+	text-align: center;
424
+}
425
+
426
+.quantity{
427
+	margin-left: 5px;
428
+}
429
+
430
+.uom{
431
+	margin-left: 20px;
432
+}
433
+
434
+.ghs-description,.hazard-description]{
435
+	display: none;
436
+}
437
+
438
+.material-link{
439
+	font-size: 12.5px;
440
+	margin-left: 15px;
441
+}
442
+
443
+.float-right{
444
+	float: right;
445
+	display: inline-block;
446
+}
447
+
448
+.hidden-entry{
449
+	display: none;
450
+}
451
+
452
+.select-form{
453
+	width: 100%;
454
+	height: 31.25px;
455
+	padding: 7.5px 0px;
456
+	margin-right: 15px;
457
+	display: inline-block;
458
+	text-align: right !important;
459
+	transform: translateY(-3.75px);
460
+}
461
+
462
+.select-header{
463
+	font-size: 12.5px;
464
+	margin-right: 7.5px;
465
+	display: inline-block;
466
+}
467
+
468
+.material{
469
+	cursor: pointer;
470
+}
471
+
472
+td[value=mat_name]{
473
+	cursor: pointer;
474
+}
475
+
476
+.material-data-icon-wrapper{
477
+	padding: 15px;
478
+}
479
+
480
+.material-data-shader{
481
+	left: 0;
482
+	top: 0;
483
+	z-index: 9999;
484
+	width: 100%;
485
+	height: 100%;
486
+	position: absolute;
487
+	will-change: transform;
488
+	transform: translateX(-100%);
489
+	background-color: rgba(0,0,0,0);
490
+    transition: all 0.25s ease-in-out;
491
+}
492
+
493
+.material-data-wrapper{
494
+	left: 0;
495
+	top: 0px;
496
+	width: 300px;
497
+	height: 100%;
498
+	background-color: #fff;
499
+	border-right: 1px solid rgb(52,53,54);
500
+}
501
+
502
+.material-data-row *{
503
+	color: #060606;
504
+}
505
+
506
+.material-data-row,.material-name-wrapper{
507
+	width: 100%;
508
+	padding: 5px 15px;
509
+	display: inline-block;
510
+	word-break: break-all;
511
+}
512
+
513
+.material-data-row{
514
+	padding-left: 30px;
515
+}
516
+
517
+.material-name-wrapper{
518
+	border-bottom: 1px solid rgb(52,53,54);
519
+}
520
+
521
+.material-name{
522
+	float: left;
523
+	color: #060606;
524
+	width: initial;
525
+	display: inline-block;
526
+}
527
+
528
+.material-data-text{
529
+	color: #060606;
530
+}
531
+
532
+.shader{
533
+	background-color: rgba(0,0,0,0.5);
534
+    transition: all 0.25s ease-in-out;
535
+
536
+}
537
+
538
+.edit-link{
539
+	float: left;
540
+	margin-left: 5px;
541
+	font-size: 13.125px;
542
+	transform: translateY(-2.5%);
543
+}
544
+
545
+.table-sub-header{
546
+	width: initial;
547
+	display: inline-block;
548
+}
549
+
550
+.sub-header-wrapper{
551
+	width: 100%;
552
+	display: inline-block;
553
+}
554
+
555
+.hide-material-data-icon{
556
+	float: right;
557
+	cursor: pointer;
558
+	display: inline-block;
559
+	color: darkgray;
560
+
561
+}
562
+
563
+span[value=sds] *{
564
+	color: rgb(58,132,247);
565
+}
566
+
567
+.fade-in{
568
+    opacity: 1;
569
+    z-index: 9999;
570
+    transition: transform 0.25s,opacity 0.25s ease-in-out;
571
+}
572
+
573
+.quick-fade-in{
574
+    opacity: 1;
575
+    z-index: 9999;
576
+    transition: opacity 0.125s ease-in-out;
577
+}
578
+
579
+.slide-down{
580
+    opacity: 1;
581
+    z-index: 9999;
582
+    transform: translateY(0%);
583
+    transition: transform 0.5s,opacity 0.5s ease-in-out;
584
+}
585
+
586
+.slide-right{
587
+    transform: translateX(0%);
588
+    transition: transform 0.25s ease-in-out;
589
+}
590
+
591
+.sds{
592
+	cursor: pointer;
593
+	color: rgb(5,125,255);
594
+}
595
+
596
+td[value=ghs]{
597
+	max-width: 150px;
598
+}
599
+
600
+.edit{
601
+	resize: both;
602
+	left: 0px;
603
+	top: 0px;
604
+	z-index: 5;
605
+	width: 100%;
606
+	height: 100%;
607
+	padding: 2.5px;
608
+	transition: none;
609
+	text-align: inherit;
610
+	position: absolute;
611
+	border: 1px solid rgb(102,103,104);
612
+}
613
+
614
+@media screen and (max-width: 991px){
615
+	.material-data-shader{
616
+		z-index: 9999;
617
+	}
618
+
619
+	.material-data-wrapper{
620
+		top: 0px;
621
+		width: 90%;
622
+		height: 100%;
623
+	}
624
+
625
+	.personnel,.personnel-wrapper{
626
+		width: 100%;
627
+	}
628
+
629
+	.add-form input,.edit-form input{
630
+	    text-align: left;
631
+	}
632
+
633
+	.add-form,.edit-form{
634
+		padding: 15px;
635
+		overflow-y: auto;
636
+	}
637
+}

+ 281
- 0
public_html/style/login.css Прегледај датотеку

@@ -0,0 +1,281 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   login.css
7
+    Description     :   Styling page for login */
8
+
9
+.login{
10
+	top: 0;
11
+	left: 0;
12
+	z-index: 0;
13
+	width: 100%;
14
+	height: 100%;
15
+	text-align: center;
16
+	position: relative;
17
+	background-color: #fff;
18
+}
19
+
20
+.form-wrapper{
21
+	top: 50%;
22
+	left: 50%;
23
+	z-index: 1;
24
+	color: #fafafa;
25
+	width: 335px;
26
+	position: absolute;
27
+	display: inline-block;
28
+	transform: translate(-50%,-50%);
29
+}
30
+
31
+.form{
32
+	border-radius: 2.5px;
33
+	border: 1px solid rgb(218,220,224);
34
+}
35
+
36
+.form-logo{
37
+	top: 0;
38
+    display: none;
39
+	width: 62.5px;
40
+	border-radius: 50%;
41
+	margin-bottom: 10px;
42
+	margin-right: 15px;
43
+	position: absolute;
44
+	object-fit: scale-down;
45
+	display: inline-block;
46
+	transform: translateY(-5%);
47
+    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
48
+}
49
+
50
+.form-header-wrapper{
51
+	text-align: left;
52
+	padding: 15px 20px 5px;
53
+	border-bottom: 1px solid rgb(218,220,224);
54
+}
55
+
56
+.form-header{
57
+	margin: 0;
58
+	color: #202124;
59
+	font-size: 16.5px;
60
+}
61
+
62
+.form-header-subtitle{
63
+	color: darkgray;
64
+}
65
+
66
+.form-body-header{
67
+	color: #202124;
68
+	font-size: 16.5px;
69
+}
70
+
71
+.form-body{
72
+	padding: 0px;
73
+ 	font-size: 15px;
74
+	text-align: left;
75
+	border-radius: 2.5px;
76
+    margin-bottom: 7.5px;
77
+}
78
+
79
+.placeholder{
80
+	z-index: 1;
81
+	left: 15px;
82
+	color: darkgray;
83
+	font-size: 11px;
84
+	font-weight: bold;
85
+	top: 50% !important;
86
+	position: absolute;
87
+	will-change: transform;
88
+	text-transform: uppercase;
89
+	transform: translateY(-50%) !important;
90
+}
91
+
92
+.login-field{
93
+	z-index: 3;
94
+	width: 100%;
95
+	height: 100%;
96
+	border: none;
97
+	color: #060606;
98
+	position: absolute;
99
+	padding: 7.5px 15px;
100
+	padding-right: 35px;
101
+	will-change: padding-top;
102
+	background-color: transparent;
103
+}
104
+
105
+.view-password{
106
+	z-index: 5;
107
+	right: 15px;
108
+	color: darkgray;
109
+	cursor: pointer;
110
+	font-size: 13.75px;
111
+	position: absolute;
112
+	will-change: color;
113
+	transform: translateY(15px);
114
+	transition: color 0.5s ease-in-out;
115
+}
116
+
117
+.view-password:hover{
118
+	color: #060606;
119
+}
120
+
121
+.placeholder-icon{
122
+	color:#0070E0;
123
+	margin-left: 2.5px;
124
+	font-size: 4px !important;
125
+	transform: translateY(-50%);
126
+}
127
+
128
+.submit-login,.submit-login:hover{
129
+	color: #fff;
130
+	font-size: 15px;
131
+	font-weight: 500;
132
+	border-radius: 2.5px;
133
+	padding: 6.25px 10px;
134
+	border: 1px solid #0c6ebe;
135
+	transition: all 0.25s ease-in-out;
136
+}
137
+
138
+.form-input-wrapper{
139
+	padding: 15px 20px;
140
+}
141
+
142
+.form-subtitle{
143
+	margin: 0px;
144
+	text-align: left;
145
+	padding: 7.5px 15px;
146
+}
147
+
148
+.form-link{
149
+	float: left;
150
+	font-size: 12.5px;
151
+	display: inline-block;
152
+	text-decoration: none;
153
+}
154
+
155
+.form-link:hover{
156
+	text-decoration: none;
157
+}
158
+
159
+.link-divider{
160
+	float: left;
161
+	display: inline-block;
162
+	margin-left: 7.5px;
163
+	margin-right: 7.5px;
164
+	color: rgb(80,136,209);
165
+	font-size: 5px !important;
166
+	transform: translateY(150%);
167
+}
168
+
169
+.shrink{
170
+	padding-top: 22.5px !important;
171
+	transition: padding-top 0.25s ease-in-out;
172
+}
173
+
174
+.slide{
175
+	font-size: 10px !important;
176
+  	transform: translateY(-100%) !important;
177
+	transition: all 0.25s ease-in-out;
178
+}
179
+
180
+.slide i{
181
+	font-size: 9px !important;
182
+}
183
+
184
+.google-sign-in-wrapper{
185
+	margin-top: 15px;
186
+	padding: 0px 25px;
187
+	position: relative;
188
+	border-top: 1px solid rgb(218,220,224);
189
+}
190
+
191
+.google-sign-in-header{
192
+	color: #202124;
193
+	font-size: 12.5px;
194
+	margin-top: 20px;
195
+	text-align: center;
196
+	margin-bottom: 7.5px;
197
+}
198
+
199
+.or{
200
+	left: 50%;
201
+	padding: 5px 7.5px;
202
+	position: absolute;
203
+	display: inline-block;
204
+	background-color: #fff;
205
+	transform: translate(-50%,-55%);
206
+}
207
+
208
+.google-sign-in{
209
+	height: 40px;
210
+	width: 100%;
211
+	padding: 0px;
212
+	font-size: 15px;
213
+	color: #060606;
214
+	font-weight: 500;
215
+	position: relative;
216
+	border-radius: 2.5px;
217
+	display: inline-block;
218
+	background-color: #fff;
219
+	will-change: filter,box-shadow;
220
+	transition: all 0.25s ease-in-out;
221
+	border: 1px solid rgb(218,220,224);
222
+
223
+}
224
+
225
+.google-logo{
226
+	left: 0;
227
+	float: left;
228
+	height: 39px;
229
+	padding: 10px;
230
+	position: absolute;
231
+	margin-right: 10px;
232
+	display: inline-block;
233
+	border-right: 1px solid rgb(218,220,224);
234
+}
235
+
236
+.google-sign-in:hover{
237
+	color: #282828;
238
+	text-decoration: none;
239
+}
240
+.google-sign-in-text{
241
+	width: 100%;
242
+	float: left;
243
+	text-align: center;
244
+	display: inline-block;
245
+	transform: translateY(30%);
246
+
247
+}
248
+
249
+input{
250
+  filter: none;
251
+}
252
+
253
+*::-webkit-input-placeholder,*:-moz-placeholder{
254
+	color: #999;
255
+}
256
+*:focus::-webkit-input-placeholder,*:focus:-moz-placeholder{
257
+	color: #ccc;
258
+}​
259
+
260
+input:-webkit-autofill,
261
+input:-webkit-autofill:hover,
262
+input:-webkit-autofill:focus,
263
+input:-webkit-autofill:active,
264
+input:-internal-autofill-selected{
265
+  	border-radius: 2.5px;
266
+	color: #000 !important;
267
+  	background-color: transparent !important;
268
+    -webkit-text-fill-color: #000 !important;
269
+    transition: background-color 0.5s ease-in-out;
270
+}
271
+
272
+button:focus,
273
+button:active{
274
+  	border-radius: 2.5px;
275
+}
276
+
277
+@media screen and (max-width: 350px){
278
+	.form{
279
+		width: 100%;
280
+	}
281
+}

+ 867
- 0
public_html/style/main.css Прегледај датотеку

@@ -0,0 +1,867 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   main.css
7
+    Description     :   Main styling for page, navbar and footer */
8
+
9
+*{
10
+    box-sizing: border-box;
11
+}
12
+
13
+:root{
14
+    --alt: #323940;
15
+    --overflow: #000;
16
+    --primary: #64b5f6;
17
+    --secondary: #3651fc;
18
+    --base: rgb(36,41,46);
19
+    --overlay-dark: #2d2f34;
20
+    --overlay-light: #383b40;
21
+    --surface: rgb(44,44,46);
22
+}
23
+
24
+body,html,.content{
25
+    width: 100%;
26
+    height: 100%;
27
+    display: block;
28
+    overflow: hidden;
29
+}
30
+
31
+.content{
32
+    overflow-y: auto;
33
+    overflow-x: hidden;
34
+}
35
+
36
+.navbar{
37
+    top: 0;
38
+    width: 100%;
39
+    height: 60px;
40
+    display: block;
41
+    position: relative;
42
+    text-align: left;
43
+    background-color: #060606;
44
+    padding: 12.5px 10% !important;
45
+    /* border-bottom: 1px solid rgb(52,53,54); */
46
+}
47
+
48
+.navbar-header{
49
+    float: left;
50
+    display: inline-block;
51
+}
52
+
53
+.navbar-title{
54
+    color: #fbfbfb;
55
+    font-size: 25px;
56
+    font-weight: 700;
57
+    text-transform: capitalize;
58
+}
59
+
60
+.navbar-title:hover{
61
+    color: darkgray;
62
+    text-decoration: none;
63
+}
64
+
65
+.link-wrapper{
66
+    width: 85%;
67
+    float: right;
68
+    display: block;
69
+    padding-left: 15px;
70
+}
71
+
72
+.navbar-nav{
73
+    display: inline-block;
74
+    transform: translateY(25%);
75
+}
76
+
77
+.nav-item{
78
+    float: left;
79
+    display: inline-block;
80
+}
81
+
82
+.nav-link{
83
+    float: left;
84
+    color: #969696;
85
+    font-size: 15px;
86
+    margin-right: 15px;
87
+    text-decoration: none;
88
+    display: inline-block;
89
+    padding: 0px !important;
90
+}
91
+
92
+.nav-link:hover{
93
+    color: #fbfbfb;
94
+}
95
+
96
+.current{
97
+    color: #fbfbfb;
98
+}
99
+
100
+.um-wrapper{
101
+    width: 200px;
102
+    float: right;
103
+    display: flex;
104
+    cursor: pointer;
105
+    position: relative;
106
+    font-weight: bold;
107
+    font-size: 15px;
108
+    padding: 5px 15px;
109
+    border-radius: 2.5px;
110
+    border: 1px solid transparent;
111
+}
112
+
113
+.um-wrapper[aria-expanded=true]{
114
+    border-bottom-left-radius: 0px;
115
+    background-color: #060606;
116
+    border: 1px solid rgb(52,53,54);
117
+}
118
+
119
+.user-menu{
120
+    width: 100%;
121
+    float: right;
122
+    display: block;
123
+    background-color: transparent;
124
+}
125
+
126
+.user{
127
+    width: 100%;
128
+    color: #fbfbfb;
129
+    padding-left: 0px;
130
+    padding-right: 0px;
131
+    font-size: 15px;
132
+}
133
+
134
+.um-icons{
135
+    float: right;
136
+    transform: translateY(25%);
137
+}
138
+
139
+.dropdown-icon{
140
+    color: darkgray;
141
+    font-size: 12.5px;
142
+    transform: translateY(50%);
143
+}
144
+
145
+nav .dropdown-menu{
146
+    margin: 0%;
147
+    width: 10%;
148
+    top: 102.5%;
149
+    left: -1.05px;
150
+    padding: 0px;
151
+    border-radius: 0px;
152
+    border: 1px solid rgb(52,53,54);
153
+    border-top: none;
154
+    background-color: #060606;
155
+    border-bottom-left-radius: 2.5px;
156
+    border-bottom-right-radius: 2.5px;
157
+}
158
+
159
+.dropdown-divider{
160
+    margin: 0px;
161
+    border-top: 1.5px solid #272728;
162
+}
163
+
164
+nav .dropdown-item{
165
+    cursor: pointer;
166
+    color: lightgray;
167
+    font-size: 13.5px;
168
+    margin-bottom: 0px;
169
+    padding: 7.5px 15px;
170
+    border-radius: 0px !important;
171
+}
172
+
173
+.dropdown-item:last-child{
174
+    border-bottom-left-radius: 2.5px !important;
175
+    border-bottom-right-radius: 2.5px !important;
176
+}
177
+
178
+.dropdown-item:hover{
179
+    color: #ffffff;
180
+    background-color: #060606;
181
+}
182
+
183
+.main{
184
+    width: 100%;
185
+    padding: 2.5% 10%;
186
+    display: inline-block;
187
+    background-color: #fff;
188
+    min-height: calc(100% - 60px);
189
+}
190
+
191
+.display{
192
+    display: inline-block !important;
193
+}
194
+
195
+.hide{
196
+    display: none !important;
197
+}
198
+
199
+.invalid{
200
+    border: 1px solid rgb(220,53,69) !important;
201
+}
202
+.invalid-icon{
203
+    color: var(--danger) !important;
204
+}
205
+
206
+.main-wrapper{
207
+    width: 100%;
208
+    padding: 0;
209
+    display: none;
210
+    min-height: 100%;
211
+}
212
+
213
+.header-wrapper{
214
+    width: 100%;
215
+    padding: 0px 0px 30px;
216
+    display: inline-block;
217
+}
218
+
219
+.header{
220
+    margin: 0;
221
+    width: 100%;
222
+    float: left;
223
+    color: #202124;
224
+    font-weight: 700;
225
+    display: inline-block;
226
+    text-transform: capitalize;
227
+}
228
+
229
+.table-wrapper{
230
+    width: 100%;
231
+    height: 100%;
232
+    padding: 0px;
233
+    overflow: auto;
234
+    border-radius: 2.5px;
235
+    display: inline-block;
236
+    border: 1px solid rgb(52,53,54) !important;
237
+}
238
+
239
+.table{
240
+  margin-bottom: 0%;
241
+  position: relative;
242
+  border-collapse: separate;
243
+  border-spacing: 0px;
244
+}
245
+
246
+th{
247
+    top: 0;
248
+    z-index: 2;
249
+    color: #202124;
250
+    text-align: center;
251
+    vertical-align: top;
252
+    font-weight: normal;
253
+    border: 1px solid rgb(52,53,54) !important;
254
+    border-top: none !important;
255
+    border-left: none !important;
256
+    vertical-align: top !important;
257
+    background-color: #e6e6e6;
258
+    padding: 7.5px 10px 0px !important;
259
+}
260
+
261
+td{
262
+    color: #202124;
263
+    border: none;
264
+    text-align: center;
265
+    display: table-cell;
266
+    word-wrap: break-word;
267
+    text-overflow: ellipsis;
268
+    padding: 3.5px 5px !important;
269
+    border-top: 0 solid !important;
270
+    border-bottom: 1px solid rgb(52,53,54) !important;
271
+    border-right: 1px solid rgb(52,53,54) !important;
272
+}
273
+
274
+td,th{
275
+    height: 30px;
276
+    font-size: 13.125px;
277
+}
278
+
279
+td:last-child{
280
+    border-right: 0px !important;
281
+}
282
+
283
+td[value=cas]{
284
+    max-width: 200px;
285
+}
286
+
287
+td[value=type]{
288
+    text-transform: capitalize;
289
+}
290
+
291
+td[value=sds],td[value=transaction]{
292
+    width: 50px;
293
+}
294
+
295
+td[value=mat_name],td[value=man_name],td[value=location]{
296
+    text-transform: capitalize;
297
+}
298
+
299
+td[value=capacity],td[value=total],td[value=quantity],td[value=uom]{
300
+    text-align: right;
301
+}
302
+th[value=capacity],th[value=total],th[value=quantity],th[value=uom]{
303
+    text-align: right;
304
+}
305
+
306
+td[value=mat_name]{
307
+    text-align: left;
308
+    color: rgb(58,132,247);
309
+    padding-left: 15px !important;
310
+}
311
+
312
+th[value=person_name]{
313
+    text-align: left;
314
+}
315
+
316
+.person-name{
317
+    padding-left: 15px !important;
318
+}
319
+
320
+tbody tr:first-child td{
321
+    border-top: 0px solid #e9e9e9 !important;
322
+}
323
+
324
+th:last-child{
325
+    border-right: none !important;
326
+}
327
+
328
+tr:last-child td{
329
+    border-bottom: 0px !important;
330
+}
331
+
332
+.option{
333
+    border: none;
334
+    cursor: pointer;
335
+    background-color: transparent;
336
+    font-size: 13.125px;
337
+}
338
+
339
+.option:hover{
340
+    opacity: 0.80;
341
+    transform: translateY(0.50px);
342
+    transition: opacity 0.5s,transform 0.5s;
343
+}
344
+
345
+.alerts{
346
+    bottom: 0%;
347
+    left: 50%;
348
+    opacity: 0;
349
+    z-index: 9999;
350
+    min-width: 325px;
351
+    font-size: 14px;
352
+    position: absolute;
353
+    padding: 15px 15px 30px;
354
+    will-change: transform,opacity;
355
+    transform: translate(-50%,100%) scale(0.5);
356
+    transition: transform 0.5s,opacity 0.25s ease-in-out;
357
+}
358
+
359
+.alert{
360
+    margin: 0;
361
+    width: 100%;
362
+    color: #fff;
363
+    padding: 15px;
364
+    text-align: left;
365
+    font-weight: normal;
366
+    position: relative;
367
+    border-radius: 2.5px;
368
+    background-color: var(--base);
369
+    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
370
+}
371
+
372
+.message-icon-wrapper{
373
+    display: block;
374
+}
375
+
376
+.message-icon{
377
+    display: none;
378
+    font-size: 30px;
379
+    margin-bottom: 15px;
380
+}
381
+
382
+.alert-message{
383
+    margin: 0;
384
+    transform: translateY(-2.5%);
385
+    font-family: "Noto Sans",sans-serif;
386
+}
387
+
388
+.alert-status{
389
+    margin: 0;
390
+    font-weight: bold;
391
+    margin-bottom: 15px;
392
+    display: inline-block;
393
+    text-transform: capitalize;
394
+    margin-right: 5px !important;
395
+    font-family: "Noto Sans",sans-serif;
396
+}
397
+
398
+.alert p{
399
+    margin: 0px;
400
+}
401
+
402
+.error,.failed,.warning{
403
+    background-color: var(--danger);
404
+}
405
+
406
+.success{
407
+    background-color: rgb(40,167,69);
408
+}
409
+
410
+.slide-up{
411
+  opacity: 1;
412
+  animation: opacity 0.25s,slide-up 0.5s ease-in-out;
413
+  transform: translate(-50%,-15%) scale(1);
414
+}
415
+
416
+
417
+@keyframes slide-up{
418
+    0%{
419
+        transform: translate(-50%,100%) scale(0.5);
420
+    }
421
+    100%{
422
+        transform: translate(-50%,-15%) scale(1);
423
+    }
424
+}
425
+
426
+.button{
427
+    border: none;
428
+    color: white;
429
+    cursor: pointer;
430
+    border-radius: 5px;
431
+}
432
+
433
+.button:hover{
434
+    box-shadow: none;
435
+    filter: brightness(95%);
436
+}
437
+
438
+.option-cell{
439
+    display: inline-flex;
440
+}
441
+
442
+.trans-cell{
443
+    text-align: center;
444
+    margin-right: 7.5px;
445
+}
446
+
447
+.action{
448
+    color: #202124;
449
+    border: none;
450
+    font-size: 12.5px;
451
+    margin-right: 5px;
452
+    padding: 1.25px 5px;
453
+    background-color: transparent;
454
+    border-radius: 2.5px !important;
455
+}
456
+.action i,.option i{
457
+    color: #202124;
458
+}
459
+
460
+.changes-wrapper{
461
+    height: 50px;
462
+    text-align: left;
463
+    padding-top: 7.5px;
464
+}
465
+
466
+.entry-cell{
467
+    position: relative;
468
+}
469
+
470
+.changes{
471
+    color: #fff;
472
+    border: none;
473
+    cursor: pointer;
474
+    border-radius: 5px;
475
+    background-color: rgb(234,64,59);
476
+}
477
+
478
+.delete-wrapper{
479
+    margin-top: 15px;
480
+}
481
+
482
+.delete{
483
+    color: white;
484
+    margin-right: 5px; 
485
+    background-color: rgb(68,135,243);
486
+}
487
+
488
+.changes:hover,.delete:hover,.cancel-delete:hover{
489
+    opacity: 0.90;
490
+    color: #eaeded;
491
+    transition: opacity 0.50s,color 0.50s ease-in-out;
492
+}
493
+
494
+.slide-up{
495
+    opacity: 1 !important;
496
+    transition: opacity 1s ease-in-out;
497
+}
498
+
499
+p{
500
+    margin: 0px;
501
+}
502
+
503
+.text:-webkit-autofill,
504
+.text:-webkit-autofill:hover, 
505
+.text:-webkit-autofill:focus, 
506
+.text:-webkit-autofill:active{
507
+    border: 3px solid blue;
508
+    background-color: #eaeded;
509
+    -webkit-text-fill-color: gray !important;
510
+    -webkit-box-shadow: 0 0 0 30px #eaeded inset !important;
511
+}
512
+
513
+.redir{
514
+    color: #8cc2ff;
515
+}
516
+.redir:hover{
517
+    text-decoration: none;
518
+}
519
+
520
+.submit-query{
521
+    color: rgba(0,0,0,0.5);
522
+    background-color: #eaeded;
523
+    border:  1px solid lightgray;
524
+}
525
+
526
+.li-wrapper{
527
+  display: block;
528
+  margin-bottom: 1%;
529
+}
530
+
531
+.footer{
532
+    width: 100%;
533
+    height: 200px;
534
+    display: block;
535
+    margin-top: 0px;
536
+    padding-top: 2.5%;
537
+    padding-left: 10%;
538
+    padding-right: 10%;
539
+    background-color: #060606;
540
+}
541
+
542
+.footer *{
543
+    color: #fff !important;
544
+}
545
+
546
+.copyright{
547
+    font-size: 10px;
548
+    font-weight: normal;
549
+}
550
+
551
+.copyright-wrapper{
552
+    width: 100%;
553
+    padding: 0px;
554
+    text-align: right;
555
+}
556
+
557
+.fa-copyright{
558
+    padding: 0px 5px;
559
+}
560
+
561
+.text-field{
562
+    top: 0;
563
+    z-index: 5;
564
+    float: left;
565
+    border: none;
566
+    color: #383838;
567
+    font-size: 14px;
568
+    will-change: top;
569
+    position: absolute;
570
+    height: calc(100%);
571
+    padding: 15px 3.75px;
572
+    width: calc(92.5% - 30px);
573
+    background-color: transparent;
574
+    transition: top 0.5s ease-in-out;
575
+}
576
+
577
+.input-wrapper{
578
+    width: 100%;
579
+    height: 45px;
580
+    position: relative;
581
+    border-radius: 2.5px;
582
+    margin-bottom: 10px;
583
+    background-color: #fff;
584
+    border: 1px solid rgb(218,220,224);
585
+}
586
+
587
+
588
+.actions{
589
+  width: 100%;
590
+  display: block;
591
+  margin: 7.5px 0px;
592
+  text-align: center;
593
+}
594
+
595
+.shrink-wrapper{
596
+  padding-top: 12.5px;
597
+  padding-bottom: 2.5px;
598
+}
599
+
600
+.text-field:focus .placeholder{
601
+  background-color: #fff;
602
+}
603
+
604
+.action-btn{
605
+    color: #fff;
606
+    padding: 5px;
607
+    font-size: 15px;
608
+    display: inline-block;
609
+}
610
+
611
+.action-btn:hover{
612
+    color: #fff;
613
+}
614
+
615
+#cancel{
616
+  background-color: rgb(200,70,100);
617
+}
618
+
619
+.empty-field{
620
+    border: 1px solid rgb(255,70,70) !important; 
621
+}
622
+
623
+.required-field{
624
+    color: rgb(255,70,70);
625
+}
626
+
627
+.fields-required{
628
+    display: none;
629
+    color: rgb(255,70,70);
630
+}
631
+
632
+.label-input-wrapper{
633
+  display: block;
634
+  margin-bottom: 2.5%;
635
+}
636
+
637
+a:hover{
638
+    text-decoration: none;
639
+}
640
+
641
+.popover-content{
642
+    display: none;
643
+}
644
+
645
+.search-form-wrapper{
646
+    width: 250px;
647
+    height: 31.25px;
648
+    margin-left: 15px;
649
+    display: inline-flex;
650
+}
651
+
652
+.search-form{
653
+    width: 100%;
654
+    float: left;
655
+    font-size: 14px;
656
+    border-radius: 2.5px;
657
+    padding: 2.5px 7.5px;
658
+    display: inline-block;
659
+    color: #202124 !important;
660
+    background-color: #fff;
661
+    border: 1px solid rgb(218,220,224);
662
+}
663
+
664
+.processing{
665
+    width: 100%;
666
+    margin-top: 5px;
667
+    margin-bottom: 5px;
668
+    text-align: center;
669
+    border-radius: 2.5px;
670
+    display: inline-flex;
671
+}
672
+
673
+.processing-text{
674
+    color: #202124;
675
+    font-size: 14px;
676
+}
677
+
678
+.loader{
679
+    width: 20px;
680
+    height: 20px;
681
+    margin-top: 2.5px;
682
+    margin-left: 25px;
683
+    border-radius: 50%;
684
+    display: inline-block;
685
+    border: 2.5px solid #fff;
686
+    border-top: 2.5px solid #1a1a1b;
687
+    animation: spin 2s linear infinite;
688
+}
689
+
690
+.wait{
691
+    cursor: wait !important;
692
+}
693
+
694
+.search-form-submit{
695
+    width: 15%;
696
+    float: left;
697
+    display: none;
698
+    color: #202124;
699
+    cursor: pointer;
700
+    border-left: none;
701
+    border-top-right-radius: 2.5px;
702
+    border-bottom-right-radius: 2.5px;
703
+    background-color: #fff;
704
+    border: 1px solid rgb(218,220,224);
705
+    border-left: 0px;
706
+}
707
+
708
+.clear-icon{
709
+    font-size: 17.5px;
710
+    transform: translateY(17.5%);
711
+}
712
+
713
+.active-form .clear-btn{
714
+    display: inline-block;
715
+}
716
+
717
+.active-form .search-form{
718
+    width: 85%;
719
+    border-top-right-radius: 0;
720
+    border-bottom-right-radius: 0;
721
+}
722
+
723
+.float-right{
724
+    display: block;
725
+}
726
+
727
+.sort{
728
+    cursor: pointer;
729
+}
730
+.sort-icon{
731
+    margin-left: 5px;
732
+}
733
+.sort-alt{
734
+    display: none;
735
+}
736
+
737
+.download-option{
738
+    width: 100%;
739
+    cursor: pointer;
740
+    padding: 5px;
741
+    display: inline-block;
742
+}
743
+
744
+.t-icon{
745
+    font-size: 20px;
746
+}
747
+
748
+.download-option:hover{
749
+    background-color: rgb(245,245,245);
750
+}
751
+
752
+.download{
753
+    padding: 0;
754
+    width: 35px;
755
+    height: 31.25px;
756
+    float: left;
757
+    display: inline-block;
758
+    margin-left: 15px;
759
+    margin-right: 15px;
760
+}
761
+
762
+.download-btn{
763
+    cursor: pointer;
764
+    padding: 0;
765
+    width: 35px;
766
+    height: 31.25px;
767
+    border-radius: 2.5px;
768
+    text-align: center;
769
+    display: inline-block ;
770
+}
771
+
772
+.download-icon{
773
+    transform: translate(9%,10%);
774
+}
775
+
776
+.sub-header{
777
+    margin-bottom: 5px;
778
+}
779
+
780
+.main-wrapper .total,.table-total{
781
+    margin-top: 5px;
782
+    text-align: right;
783
+    padding-right: 5px;
784
+}
785
+
786
+@keyframes spin{
787
+    0%{
788
+        transform: rotate(0deg);
789
+    }
790
+    100%{
791
+        transform: rotate(360deg);
792
+    }
793
+}
794
+
795
+@media screen and (max-width: 991px){
796
+    .navbar{
797
+        height: auto;
798
+        padding: 7.5px 0px;
799
+        position: relative;
800
+        display: inline-flex;
801
+        border-bottom: 0.5px solid rgb(52,53,54);
802
+    }
803
+
804
+    .link-wrapper{
805
+        width: 100%;
806
+        padding: 0px;
807
+    }
808
+
809
+    .navbar-nav,.nav-item{
810
+        width: 100%;
811
+    }
812
+
813
+    .nav-item{
814
+        padding-left: 15px;
815
+    }
816
+
817
+    .nav-link{
818
+        width: 100%;
819
+        text-align: left;
820
+    }
821
+
822
+    .um-wrapper{
823
+        right: 0;
824
+        width: 100%;
825
+        margin-top: 10px;
826
+        padding: 5px 12.5px;
827
+        position: relative;
828
+        border-radius: 2.5px;
829
+    }
830
+
831
+    .header-wrapper{
832
+        padding: 15px 0px 7.5px;
833
+    }
834
+
835
+    .float-right{
836
+        width: 100%;
837
+    }
838
+
839
+    .download{
840
+        margin: 15px 0px;
841
+        width: 100%;
842
+    }
843
+
844
+    .download-btn{
845
+        width: 100%;
846
+    }
847
+
848
+    .search-form-wrapper{
849
+        width: 100%;
850
+        margin: 15px 0px;
851
+    }
852
+
853
+    #add-material,#add{
854
+        width: 100%;
855
+    }
856
+
857
+    .download-icon{
858
+        transform: translate(25%,10%);
859
+    }
860
+
861
+    .large-field,.medium-field,.small-field,.extra-small-field{
862
+        width: 100% !important;
863
+        margin-left: 0 !important;
864
+        margin-right: 0 !important;
865
+        padding: 0 !important;
866
+    }
867
+}