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 -webkit-filter: blur(100px);
338}
339
340.single-photo-container{
341 margin: 10px;
342 display: inline-block;
343}
344
345.photo-viewer{
346 justify-content: center;
347 width: 100%;
348 height: 100%;
349 position: fixed;
350 top: 0;
351 left: 0;
352 z-index: 5;
353 background: #0009;
354 backdrop-filter: blur(75px);
355 -webkit-backdrop-filter: blur(75px);
356 opacity: 0;
357 display: none;
358}
359
360.photo-context-menu{
361 position: fixed;
362 top: 0;
363 left: 0;
364 padding: 10px;
365 border-radius: 5px;
366 backdrop-filter: blur(5px);
367 -webkit-backdrop-filter: blur(5px);
368 background: #555a;
369 color: #aaa;
370 box-shadow: #0005 0 0 10px;
371 opacity: 0;
372}
373
374.photo-context-menu > div{
375 padding: 2px 10px;
376 width: calc(100% - 10px);
377 text-align: center;
378 transition: 0.1s;
379}
380
381.photo-context-menu > div:hover{
382 color: #fff;
383 cursor: pointer;
384 user-select: none;
385 -webkit-user-select: none;
386}
387
388.image-container{
389 height: 100%;
390 background-size: contain !important;
391 background-repeat: no-repeat !important;
392 background-position: center !important;
393 opacity: 0;
394}
395
396.viewer-button{
397 color: white;
398 width: 30px;
399 height: 30px;
400 display: flex;
401 justify-content: center;
402 align-items: center;
403 border-radius: 50px;
404 font-size: 12px;
405 background: #8885;
406 backdrop-filter: blur(10px);
407 -webkit-backdrop-filter: blur(10px);
408 user-select: none;
409 -webkit-user-select: none;
410 cursor: pointer;
411 z-index: 7;
412 box-shadow: #0008 0 0 10px;
413}
414
415.viewer-close{
416 position: fixed;
417 top: 10px;
418 right: 10px;
419 width: 35px;
420 height: 35px;
421}
422
423.prev-button{
424 transition: 0.25s;
425 position: fixed;
426 top: 50%;
427 left: 0;
428 color: white;
429 width: 50px;
430 height: 150px;
431 display: flex;
432 justify-content: center;
433 align-items: center;
434 transform: translateY(-50%);
435 background: rgba(255, 255, 255, 0.144);
436 backdrop-filter: blur(50px);
437 -webkit-backdrop-filter: blur(50px);
438 border-radius: 0 15px 15px 0;
439 cursor: pointer;
440 user-select: none;
441 -webkit-user-select: none;
442 box-shadow: #000 0 0 10px;
443}
444
445.prev-button:hover{
446 background: rgba(255, 255, 255, 0.349);
447}
448
449.next-button{
450 transition: 0.25s;
451 position: fixed;
452 top: 50%;
453 right: 0;
454 color: white;
455 width: 50px;
456 height: 150px;
457 display: flex;
458 justify-content: center;
459 align-items: center;
460 transform: translateY(-50%);
461 background: rgba(255, 255, 255, 0.144);
462 backdrop-filter: blur(50px);
463 -webkit-backdrop-filter: blur(50px);
464 border-radius: 15px 0 0 15px;
465 cursor: pointer;
466 user-select: none;
467 -webkit-user-select: none;
468 box-shadow: #000 0 0 10px;
469}
470
471.next-button:hover{
472 background: rgba(255, 255, 255, 0.349);
473}
474
475.reload-photos{
476 position: fixed;
477 top: 70px;
478 right: 20px;
479 color: white;
480 user-select: none;
481 -webkit-user-select: none;
482 cursor: pointer;
483 opacity: 0;
484}
485
486.confirmation-box{
487 position: fixed;
488 top: 0;
489 left: 0;
490 width: 100%;
491 height: 100%;
492 z-index: 15;
493 background: #0005;
494 transition: 0.25s;
495 backdrop-filter: blur(10px);
496 -webkit-backdrop-filter: blur(10px);
497}
498
499.confirmation-box-container{
500 position: fixed;
501 top: 50%;
502 left: 50%;
503 transform: translate(-50%, -50%);
504 color: white;
505 text-align: center;
506 background: #9995;
507 padding: 10px;
508 width: 60%;
509 border-radius: 10px;
510 box-shadow: #000 0 0 10px;
511 font-size: 18px;
512 -webkit-backdrop-filter: blur(10px);
513 backdrop-filter: blur(10px);
514}
515
516.button-danger{
517 display: inline-block;
518 -webkit-backdrop-filter: blur(10px);
519 backdrop-filter: blur(10px);
520 padding: 10px;
521 background: rgba(255, 0, 0, 0.333);
522 box-shadow: #0005 inset 0 0 10px;
523 border-radius: 50px;
524 margin: 0 10px;
525 cursor: pointer;
526 user-select: none;
527 -webkit-user-select: none;
528 width: 200px;
529 transition: 0.25s;
530}
531
532.button{
533 display: inline-block;
534 padding: 10px;
535 backdrop-filter: blur(10px);
536 -webkit-backdrop-filter: blur(10px);
537 background: #9995;
538 box-shadow: #0005 inset 0 0 10px;
539 border-radius: 50px;
540 margin: 0 10px;
541 cursor: pointer;
542 user-select: none;
543 -webkit-user-select: none;
544 width: 200px;
545 transition: 0.25s;
546}
547
548.button:hover{
549 box-shadow: #000a inset 0 0 10px;
550}
551
552.button-danger:hover{
553 box-shadow: #000a inset 0 0 10px;
554}
555
556.control-buttons{
557 position: fixed;
558 bottom: 10px;
559 left: 50%;
560 transform: translateX(-50%);
561 display: flex;
562}
563
564.control-buttons div{
565 margin: 0 20px;
566}
567
568.copy-notif{
569 position: fixed;
570 top: 40px;
571 left: 50%;
572 color: white;
573 transform: translateX(-50%) translateY(-100px);
574 background: #8885;
575 padding: 10px 40px;
576 backdrop-filter: blur(10px);
577 -webkit-backdrop-filter: blur(10px);
578 border-radius: 50px;
579 box-shadow: #000 0 0 10px;
580 z-index: 12;
581 opacity: 0;
582 pointer-events: none;
583}
584
585.photo-tray{
586 position: fixed;
587 bottom: -150px;
588 left: 0;
589 width: 100%;
590 height: 150px;
591 background: #7778;
592 backdrop-filter: blur(10px);
593 -webkit-backdrop-filter: blur(10px);
594 box-shadow: #0008 0 0 10px;
595 padding-bottom: 150px;
596 margin-bottom: -150px;
597}
598
599.photo-tray-close{
600 position: fixed;
601 bottom: 160px;
602 left: 50%;
603 transform: translate(-50%);
604 color: white;
605 background: #8885;
606 backdrop-filter: blur(10px);
607 -webkit-backdrop-filter: blur(10px);
608 box-shadow: #0008 0 0 10px;
609 display: flex;
610 justify-content: center;
611 align-items: center;
612 height: 30px;
613 width: 50px;
614 border-radius: 50px;
615 cursor: pointer;
616 font-size: 12px;
617 user-select: none;
618 -webkit-user-select: none;
619 transition: 0.25s width;
620}
621
622.photo-tray-close:hover{
623 width: 70px;
624}
625
626.photo-tray-columns{
627 width: 100%;
628 height: 100%;
629 display: flex;
630 color: white;
631 text-align: center;
632}
633
634.photo-tray-column{
635 height: 100%;
636 width: 100%;
637 scrollbar-width: thin;
638 overflow-y: auto;
639 overflow-x: hidden;
640 mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
641}
642
643.tray-heading{
644 font-weight: bold;
645 font-size: 20px;
646}
647
648.world-tags{
649 display: flex;
650 width: 100%;
651 justify-content: center;
652 align-items: center;
653}
654
655.world-tags div{
656 padding: 0 10px;
657 color: #bbb;
658 transition: 0.25s;
659}
660
661.world-tags div:hover{
662 color: #ddd;
663}
664
665.world-name{
666 font-size: 17px;
667}
668
669.settings{
670 position: fixed;
671 top: 0;
672 left: 0;
673 width: 100%;
674 height: 100%;
675 background: rgba(0, 0, 0, 0.4);
676 backdrop-filter: blur(100px);
677 -webkit-backdrop-filter: blur(100px);
678}
679
680.slide-bar{
681 position: fixed;
682 bottom: 0;
683 left: 0;
684 width: 100%;
685 height: 50px;
686 border-top: #aaa 1px solid;
687 overflow-x: hidden;
688 mask-image: linear-gradient(to left, #0000 0%, #000 20%, #000 80%, #0000 100%);
689 background: #aaa2;
690 box-shadow: #000 0 0 10px;
691}
692
693.inner-slide-bar{
694 display: flex;
695 height: 50px;
696 width: 200%;
697 color: white;
698 align-items: center;
699 cursor: pointer;
700 user-select: none;
701 -webkit-user-select: none;
702}
703
704.slider-dot{
705 width: 5px;
706 height: 5px;
707 border-radius: 5px;
708 background: #aaa;
709 margin: auto 25px;
710}
711
712.slider-text{
713 width: 200px;
714 text-align: center;
715 height: 50px;
716 display: flex;
717 justify-content: center;
718 align-items: center;
719 color: #aaa;
720 transition: 0.25s;
721}
722
723.slider-text:hover{
724 color: #fff;
725}
726
727.slide-bar-tri{
728 position: fixed;
729 bottom: 40px;
730 left: 50%;
731 transform: translateX(-50%);
732 border: transparent solid 5px;
733 border-top: #fff solid 5px;
734}
735
736.settings-container{
737 position: fixed;
738 top: 50px;
739 left: 0px;
740 width: 200%;
741 height: calc(100% - 100px);
742 display: flex;
743}
744
745.settings-block{
746 width: 50%;
747 height: 100%;
748 color: white;
749 text-align: center;
750}
751
752.selector{
753 padding: 10px 20px;
754 border-radius: 10px;
755 background: #000a;
756 display: inline-block;
757 margin: 10px;
758}
759
760.selector .selection-box{
761 height: 20px;
762 background: #777a;
763 margin: 5px -10px 0 -10px;
764 border-radius: 8px;
765 user-select: none;
766 -webkit-user-select: none;
767 cursor: pointer;
768 transition: 0.25s;
769 color: #fff1;
770}
771
772.selector .selection-box:hover{
773 height: 20px;
774 background: #777a;
775 margin: 5px -10px 0 -10px;
776 border-radius: 8px;
777 user-select: none;
778 -webkit-user-select: none;
779 cursor: pointer;
780 transition: 0.25s;
781 color: #fff5;
782}
783
784.selector input{
785 display: none;
786}
787
788.selector input:checked ~ label .selection-box{
789 background: rgba(0, 146, 204, 0.705);
790 color: #fff;
791}
792
793.path{
794 padding: 5px 10px;
795 background: #000a;
796 border-radius: 5px;
797 margin-left: 5px;
798 cursor: pointer;
799}
800
801.scroll-to-top{
802 position: fixed;
803 bottom: 10px;
804 right: 10px;
805 color: white;
806 width: 40px;
807 height: 40px;
808 cursor: pointer;
809 border-radius: 50%;
810 border: 2px solid white;
811 display: flex;
812 justify-content: center;
813 align-items: center;
814}
815
816.account-profile{
817 margin: auto;
818 width: 50%;
819 height: 200px;
820 display: flex;
821}
822
823.account-pfp{
824 width: 200px;
825 height: 200px;
826 background-position: center !important;
827 background-size: cover !important;
828 border-radius: 50%;
829 box-shadow: #0005 0 0 10px;
830 position: relative;
831 z-index: 10;
832}
833
834.account-desc{
835 width: calc(100% - 200px);
836 padding-left: 100px;
837 height: 150px;
838 margin: 25px 0;
839 margin-left: -100px;
840 background: #0009;
841 border-radius: 10px;
842 box-shadow: #0005 0 0 10px;
843}
844
845.storage-bar{
846 width: calc(100% - 20px);
847 height: 10px;
848 margin-left: 10px;
849 background: #555;
850 border-radius: 10px;
851 display: flex;
852 justify-content: left;
853 align-items: center;
854 margin-bottom: 2px;
855}
856
857.storage-bar-inner{
858 margin: 2px;
859 height: 6px;
860 background: #00ccff;
861 border-radius: 10px;
862}
863
864.account-notice{
865 background: #0007;
866 border-radius: 5px;
867 box-shadow: #0005 0 0 10px;
868 padding: 10px;
869 margin: auto;
870 width: calc(50% - 20px);
871 margin-top: 25px;
872}
873
874img{
875 max-width: 100%;
876 max-height: 100%;
877}