A photo manager for VRChat.
phaz.uk
1@font-face {
2 font-family: Rubik;
3 src: url(https://cdn.phazed.xyz/fonts/rubik/Rubik-VariableFont_wght.ttf);
4}
5
6body{
7 background: #000;
8 margin: 0;
9 font-family: Rubik, 'Courier New';
10}
11
12.loading{
13 position: fixed;
14 z-index: 10000;
15 top: 0;
16 left: 0;
17 width: 100%;
18 height: 100%;
19 background: black;
20 display: flex;
21 opacity: 1;
22 color: white;
23 justify-content: center;
24 align-items: center;
25}
26
27.navbar{
28 background: #555a;
29 position: fixed;
30 top: 0;
31 left: 0;
32 width: 100%;
33 margin-top: -50px;
34 padding-top: 50px;
35 height: 50px;
36 display: flex;
37 backdrop-filter: blur(10px);
38 z-index: 10;
39 box-shadow: #000 0 0 10px;
40}
41
42.navbar .tabs{
43 width: calc(100% - 450px);
44 height: 100%;
45 display: flex;
46}
47
48.navbar .account{
49 width: 100px;
50 height: 100%;
51 display: flex;
52 justify-content: center;
53 align-items: center;
54 transition: 0.1s;
55 cursor: pointer;
56 user-select: none;
57}
58
59.navbar .account:hover{
60 background: #0005;
61}
62
63.navbar .control-lights{
64 width: 150px;
65 height: 50px;
66 display: flex;
67 justify-content: center;
68 align-items: center;
69}
70
71.control-lights .light{
72 user-select: none;
73 font-size: 20px;
74 text-align: center;
75 color: white;
76 width: 100%;
77 cursor: pointer;
78 display: flex;
79 justify-content: center;
80 align-items: center;
81 height: 50px;
82 filter: invert(100%);
83}
84
85.control-lights .light:hover{
86 background: #fff5;
87}
88
89.control-lights .light img{
90 width: 25%;
91}
92
93.icon{
94 width: 15px;
95 filter: invert(100%);
96 display: flex;
97 align-items: center;
98 justify-content: center;
99 height: 100%;
100}
101
102.icon-label{
103 margin-top: -20px;
104 margin-right: -200px;
105 width: 200px;
106 color: white;
107 pointer-events: none;
108 transform: translate(40px, -12px);
109 opacity: 0;
110 transition: 0.25s;
111 user-select: none;
112}
113
114.icon:hover ~ .icon-label{
115 opacity: 1;
116 transform: translate(60px, -12px);
117}
118
119.user-pfp{
120 width: 35px;
121 height: 35px;
122 background-size: cover !important;
123 background-position: center !important;
124 border-radius: 50%;
125 margin-right: 10px;
126}
127
128.account-dropdown{
129 font-size: 20px;
130 color: white;
131}
132
133.nav-tab{
134 color: white;
135 width: 150px;
136 height: 100%;
137 transition: 0.1s;
138 cursor: pointer;
139 user-select: none;
140 justify-content: center;
141 align-items: center;
142 display: flex;
143}
144
145.nav-tab:hover{
146 background: #0005;
147}
148
149.dropdown{
150 position: fixed;
151 right: 125px;
152 top: 60px;
153 background: #555a;
154 height: 60px;
155 width: 150px;
156 border-radius: 5px;
157 backdrop-filter: blur(5px);
158 z-index: 10;
159}
160
161.dropdown-button{
162 width: 100%;
163 text-align: center;
164 padding: 5.5px 0;
165 color: #aaa;
166 cursor: pointer;
167 user-select: none;
168 transition: 0.1s;
169}
170
171.dropdown-button:hover{
172 color: #fff;
173}
174
175.photo-list{
176 width: 100%;
177 height: 100%;
178 position: fixed;
179 top: 0;
180 left: 0;
181 overflow: hidden;
182}
183
184.filter-options{
185 position: fixed;
186 top: 55px;
187 left: 5px;
188 width: 40px;
189 height: 50px;
190}
191
192.filter-options img{
193 cursor: pointer;
194 user-select: none;
195}
196
197.filter-container{
198 display: none;
199 position: fixed;
200 bottom: 0;
201 left: 50%;
202 width: 600px;
203 height: 83px;
204 transform: translate(-50%);
205 padding: 10px;
206 border-radius: 5px 5px 0 0;
207 backdrop-filter: blur(5px);
208 background: #555a;
209 color: #fff;
210 text-align: center;
211 box-shadow: #0005 0 0 10px;
212 opacity: 0;
213}
214
215.filter-container > .filter-title{
216 font-size: 30px;
217}
218
219.filter-type-select{
220 display: flex;
221 justify-content: center;
222 align-items: center;
223 width: 75%;
224 margin: auto;
225}
226
227.filter-type-select > div{
228 width: 100%;
229 border: #fff 4px solid;
230 border-left: #fff 2px solid;
231 border-right: #fff 2px solid;
232 padding: 5px 0;
233 cursor: pointer;
234 user-select: none;
235}
236
237.filter-type-select > div:first-child{
238 border-left: #fff 4px solid;
239 border-radius: 10px 0 0 10px;
240}
241
242.filter-type-select > div:last-child{
243 border-right: #fff 4px solid;
244 border-radius: 0 10px 10px 0;
245}
246
247.filter-type-select > .selected-filter{
248 background: #00ccff55;
249}
250
251.filter-search{
252 margin-top: 10px;
253 padding: 5px;
254 border: #fff 4px solid;
255 border-radius: 10px;
256 background: #0008;
257 outline: none;
258 color: white;
259 font-size: 15px;
260 font-family: 'Rubik';
261 width: calc(75% - 18px);
262}
263
264.date-list{
265 mask-image: linear-gradient(to bottom, #0000, #000, #0000);
266 overflow: auto;
267 scrollbar-width: thin;
268 height: calc(100% - 100px);
269 padding: 50px 0;
270}
271
272.date-list-date{
273 padding: 10px;
274 user-select: none;
275 cursor: pointer;
276 transition: 0.1s;
277 border-radius: 10px;
278}
279
280.date-list-date:hover{
281 background: #0005;
282 box-shadow: inset #0005 0 0 10px;
283}
284
285.photo-tree-loading{
286 width: 100%;
287 height: 100%;
288 display: flex;
289 justify-content: center;
290 align-items: center;
291 color: white;
292 font-size: 20px;
293}
294
295.loading-bar{
296 width: 500px;
297 height: 8px;
298 border-radius: 12px;
299 background: #333;
300 margin-top: 10px;
301 padding: 2px;
302}
303
304.loading-bar-inner{
305 width: 0%;
306 height: 8px;
307 border-radius: 18px;
308 background: #00ccff;
309}
310
311.photo-container{
312 width: 100%;
313 height: 100%;
314}
315
316.photo-container-bg{
317 width: 100%;
318 height: 100%;
319 position: fixed;
320 top: 0;
321 left: 0;
322 z-index: -1;
323}
324
325.single-photo-container{
326 margin: 10px;
327 display: inline-block;
328}
329
330.photo-viewer{
331 justify-content: center;
332 width: 100%;
333 height: 100%;
334 position: fixed;
335 top: 0;
336 left: 0;
337 z-index: 5;
338 background: #0009;
339 backdrop-filter: blur(75px);
340 opacity: 0;
341 display: none;
342}
343
344.photo-context-menu{
345 position: fixed;
346 top: 0;
347 left: 0;
348 padding: 10px;
349 border-radius: 5px;
350 backdrop-filter: blur(5px);
351 background: #555a;
352 color: #aaa;
353 box-shadow: #0005 0 0 10px;
354 opacity: 0;
355}
356
357.photo-context-menu > div{
358 padding: 2px 10px;
359 width: calc(100% - 10px);
360 text-align: center;
361 transition: 0.1s;
362}
363
364.photo-context-menu > div:hover{
365 color: #fff;
366 cursor: pointer;
367 user-select: none;
368}
369
370.image-container{
371 height: 100%;
372 background-size: contain !important;
373 background-repeat: no-repeat !important;
374 background-position: center !important;
375 opacity: 0;
376}
377
378.viewer-button{
379 color: white;
380 width: 30px;
381 height: 30px;
382 display: flex;
383 justify-content: center;
384 align-items: center;
385 border-radius: 50px;
386 font-size: 12px;
387 background: #8885;
388 backdrop-filter: blur(10px);
389 user-select: none;
390 cursor: pointer;
391 z-index: 7;
392 box-shadow: #0008 0 0 10px;
393}
394
395.viewer-close{
396 position: fixed;
397 top: 10px;
398 right: 10px;
399 width: 35px;
400 height: 35px;
401}
402
403.prev-button{
404 transition: 0.25s;
405 position: fixed;
406 top: 50%;
407 left: 0;
408 color: white;
409 width: 50px;
410 height: 150px;
411 display: flex;
412 justify-content: center;
413 align-items: center;
414 transform: translateY(-50%);
415 background: rgba(255, 255, 255, 0.144);
416 backdrop-filter: blur(50px);
417 border-radius: 0 15px 15px 0;
418 cursor: pointer;
419 user-select: none;
420 box-shadow: #000 0 0 10px;
421}
422
423.prev-button:hover{
424 background: rgba(255, 255, 255, 0.349);
425}
426
427.next-button{
428 transition: 0.25s;
429 position: fixed;
430 top: 50%;
431 right: 0;
432 color: white;
433 width: 50px;
434 height: 150px;
435 display: flex;
436 justify-content: center;
437 align-items: center;
438 transform: translateY(-50%);
439 background: rgba(255, 255, 255, 0.144);
440 backdrop-filter: blur(50px);
441 border-radius: 15px 0 0 15px;
442 cursor: pointer;
443 user-select: none;
444 box-shadow: #000 0 0 10px;
445}
446
447.next-button:hover{
448 background: rgba(255, 255, 255, 0.349);
449}
450
451.reload-photos{
452 position: fixed;
453 top: 70px;
454 right: 20px;
455 color: white;
456 user-select: none;
457 cursor: pointer;
458 opacity: 0;
459}
460
461.confirmation-box{
462 position: fixed;
463 top: 0;
464 left: 0;
465 width: 100%;
466 height: 100%;
467 z-index: 15;
468 background: #0005;
469 transition: 0.25s;
470 backdrop-filter: blur(10px);
471}
472
473.confirmation-box-container{
474 position: fixed;
475 top: 50%;
476 left: 50%;
477 transform: translate(-50%, -50%);
478 color: white;
479 text-align: center;
480 background: #9995;
481 padding: 10px;
482 width: 60%;
483 border-radius: 10px;
484 box-shadow: #000 0 0 10px;
485 font-size: 18px;
486 backdrop-filter: blur(10px);
487}
488
489.button-danger{
490 display: inline-block;
491 backdrop-filter: blur(10px);
492 padding: 10px;
493 background: rgba(255, 0, 0, 0.333);
494 box-shadow: #0005 inset 0 0 10px;
495 border-radius: 50px;
496 margin: 0 10px;
497 cursor: pointer;
498 user-select: none;
499 width: 200px;
500 transition: 0.25s;
501}
502
503.button{
504 display: inline-block;
505 padding: 10px;
506 backdrop-filter: blur(10px);
507 background: #9995;
508 box-shadow: #0005 inset 0 0 10px;
509 border-radius: 50px;
510 margin: 0 10px;
511 cursor: pointer;
512 user-select: none;
513 width: 200px;
514 transition: 0.25s;
515}
516
517.button:hover{
518 box-shadow: #000a inset 0 0 10px;
519}
520
521.button-danger:hover{
522 box-shadow: #000a inset 0 0 10px;
523}
524
525.control-buttons{
526 position: fixed;
527 bottom: 10px;
528 left: 50%;
529 transform: translateX(-50%);
530 display: flex;
531}
532
533.control-buttons div{
534 margin: 0 20px;
535}
536
537.copy-notif{
538 position: fixed;
539 top: 40px;
540 left: 50%;
541 color: white;
542 transform: translateX(-50%) translateY(-100px);
543 background: #8885;
544 padding: 10px 40px;
545 backdrop-filter: blur(10px);
546 border-radius: 50px;
547 box-shadow: #000 0 0 10px;
548 z-index: 12;
549 opacity: 0;
550 pointer-events: none;
551}
552
553.photo-tray{
554 position: fixed;
555 bottom: -150px;
556 left: 0;
557 width: 100%;
558 height: 150px;
559 background: #7778;
560 backdrop-filter: blur(10px);
561 box-shadow: #0008 0 0 10px;
562 padding-bottom: 150px;
563 margin-bottom: -150px;
564}
565
566.photo-tray-close{
567 position: fixed;
568 bottom: 160px;
569 left: 50%;
570 transform: translate(-50%);
571 color: white;
572 background: #8885;
573 backdrop-filter: blur(10px);
574 box-shadow: #0008 0 0 10px;
575 display: flex;
576 justify-content: center;
577 align-items: center;
578 height: 30px;
579 width: 50px;
580 border-radius: 50px;
581 cursor: pointer;
582 font-size: 12px;
583 user-select: none;
584 transition: 0.25s width;
585}
586
587.photo-tray-close:hover{
588 width: 70px;
589}
590
591.photo-tray-columns{
592 width: 100%;
593 height: 100%;
594 display: flex;
595 color: white;
596 text-align: center;
597}
598
599.photo-tray-column{
600 height: 100%;
601 width: 100%;
602 scrollbar-width: thin;
603 overflow-y: auto;
604 overflow-x: hidden;
605 mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
606}
607
608.tray-heading{
609 font-weight: bold;
610 font-size: 20px;
611}
612
613.world-tags{
614 display: flex;
615 width: 100%;
616 justify-content: center;
617 align-items: center;
618}
619
620.world-tags div{
621 padding: 0 10px;
622 color: #bbb;
623 transition: 0.25s;
624}
625
626.world-tags div:hover{
627 color: #ddd;
628}
629
630.world-name{
631 font-size: 17px;
632}
633
634.settings{
635 position: fixed;
636 top: 0;
637 left: 0;
638 width: 100%;
639 height: 100%;
640 background: rgba(0, 0, 0, 0.4);
641 backdrop-filter: blur(100px);
642}
643
644.slide-bar{
645 position: fixed;
646 bottom: 0;
647 left: 0;
648 width: 100%;
649 height: 50px;
650 border-top: #aaa 1px solid;
651 overflow-x: hidden;
652 mask-image: linear-gradient(to left, #0000 0%, #000 20%, #000 80%, #0000 100%);
653 background: #aaa2;
654 box-shadow: #000 0 0 10px;
655}
656
657.inner-slide-bar{
658 display: flex;
659 height: 50px;
660 width: 200%;
661 color: white;
662 align-items: center;
663 cursor: pointer;
664 user-select: none;
665}
666
667.slider-dot{
668 width: 5px;
669 height: 5px;
670 border-radius: 5px;
671 background: #aaa;
672 margin: auto 25px;
673}
674
675.slider-text{
676 width: 200px;
677 text-align: center;
678 height: 50px;
679 display: flex;
680 justify-content: center;
681 align-items: center;
682 color: #aaa;
683 transition: 0.25s;
684}
685
686.slider-text:hover{
687 color: #fff;
688}
689
690.slide-bar-tri{
691 position: fixed;
692 bottom: 40px;
693 left: 50%;
694 transform: translateX(-50%);
695 border: transparent solid 5px;
696 border-top: #fff solid 5px;
697}
698
699.settings-container{
700 position: fixed;
701 top: 50px;
702 left: 0px;
703 width: 200%;
704 height: calc(100% - 100px);
705 display: flex;
706}
707
708.settings-block{
709 width: 50%;
710 height: 100%;
711 color: white;
712 text-align: center;
713}
714
715.selector{
716 padding: 10px 20px;
717 border-radius: 10px;
718 background: #000a;
719 display: inline-block;
720 margin: 10px;
721}
722
723.selector .selection-box{
724 height: 20px;
725 background: #777a;
726 margin: 5px -10px 0 -10px;
727 border-radius: 8px;
728 user-select: none;
729 cursor: pointer;
730 transition: 0.25s;
731 color: #fff1;
732}
733
734.selector .selection-box:hover{
735 height: 20px;
736 background: #777a;
737 margin: 5px -10px 0 -10px;
738 border-radius: 8px;
739 user-select: none;
740 cursor: pointer;
741 transition: 0.25s;
742 color: #fff5;
743}
744
745.selector input{
746 display: none;
747}
748
749.selector input:checked ~ label .selection-box{
750 background: rgba(0, 146, 204, 0.705);
751 color: #fff;
752}
753
754.path{
755 padding: 5px 10px;
756 background: #000a;
757 border-radius: 5px;
758 margin-left: 5px;
759 cursor: pointer;
760}
761
762.scroll-to-top{
763 position: fixed;
764 bottom: 10px;
765 right: 10px;
766 color: white;
767 width: 40px;
768 height: 40px;
769 cursor: pointer;
770 border-radius: 50%;
771 border: 2px solid white;
772 display: flex;
773 justify-content: center;
774 align-items: center;
775}
776
777.account-profile{
778 margin: auto;
779 width: 50%;
780 height: 200px;
781 display: flex;
782}
783
784.account-pfp{
785 width: 200px;
786 height: 200px;
787 background-position: center !important;
788 background-size: cover !important;
789 border-radius: 50%;
790 box-shadow: #0005 0 0 10px;
791 position: relative;
792 z-index: 10;
793}
794
795.account-desc{
796 width: calc(100% - 200px);
797 padding-left: 100px;
798 height: 150px;
799 margin: 25px 0;
800 margin-left: -100px;
801 background: #0009;
802 border-radius: 10px;
803 box-shadow: #0005 0 0 10px;
804}
805
806.storage-bar{
807 width: calc(100% - 20px);
808 height: 10px;
809 margin-left: 10px;
810 background: #555;
811 border-radius: 10px;
812 display: flex;
813 justify-content: left;
814 align-items: center;
815 margin-bottom: 2px;
816}
817
818.storage-bar-inner{
819 margin: 2px;
820 height: 6px;
821 background: #00ccff;
822 border-radius: 10px;
823}
824
825.account-notice{
826 background: #0007;
827 border-radius: 5px;
828 box-shadow: #0005 0 0 10px;
829 padding: 10px;
830 margin: auto;
831 width: calc(50% - 20px);
832 margin-top: 25px;
833}