A photo manager for VRChat.
phaz.uk
1.photo-tray{
2 position: fixed;
3 bottom: -300px;
4 left: 0;
5 width: 100%;
6 height: 300px;
7 background: rgba(43, 43, 43, 0.76);
8 backdrop-filter: blur(10px);
9 -webkit-backdrop-filter: blur(10px);
10 box-shadow: #0008 0 0 10px;
11 padding-bottom: 150px;
12}
13
14.photo-tray-close{
15 position: fixed;
16 bottom: 160px;
17 left: 50%;
18 transform: translate(-50%);
19 color: white;
20 background: #8885;
21 backdrop-filter: blur(10px);
22 -webkit-backdrop-filter: blur(10px);
23 box-shadow: #0008 0 0 10px;
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 height: 30px;
28 width: 50px;
29 border-radius: 50px;
30 cursor: pointer;
31 font-size: 12px;
32 user-select: none;
33 -webkit-user-select: none;
34 transition: 0.25s width;
35}
36
37.photo-tray-close:hover{
38 width: 70px;
39}
40
41.photo-tray-columns{
42 width: 100%;
43 height: 100%;
44 display: flex;
45 color: white;
46 text-align: center;
47}
48
49.photo-tray-column{
50 height: 100%;
51 width: 100%;
52 scrollbar-width: thin;
53 overflow-y: auto;
54 overflow-x: hidden;
55 mask-image: linear-gradient(to bottom, #0000 0%, #000 10%, #000 90%, #0000 100%);
56}
57
58.tray-heading{
59 font-weight: bold;
60 font-size: 20px;
61}
62
63.world-tags{
64 display: flex;
65 width: 100%;
66 justify-content: center;
67 align-items: center;
68}
69
70.world-tags div{
71 padding: 0 10px;
72 color: #bbb;
73 transition: 0.25s;
74}
75
76.world-tags div:hover{
77 color: #ddd;
78}
79
80.world-name{
81 font-size: 17px;
82}