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