A photo manager for VRChat.
phaz.uk
1
2.photo-container{
3 width: 100%;
4 height: 100%;
5}
6
7.photo-container-bg{
8 width: 100%;
9 height: 100%;
10 position: fixed;
11 top: 0;
12 left: 0;
13 z-index: -1;
14 /* filter: blur(100px); */
15}
16
17.single-photo-container{
18 margin: 10px;
19 display: inline-block;
20}
21
22.photo-viewer{
23 justify-content: center;
24 width: 100%;
25 height: 100%;
26 position: fixed;
27 top: 0;
28 left: 0;
29 z-index: 5;
30 background: #0009;
31 opacity: 0;
32 display: none;
33}
34
35.photo-context-menu{
36 position: fixed;
37 top: 0;
38 left: 0;
39 padding: 10px;
40 border-radius: 5px;
41 background: #555a;
42 color: #aaa;
43 box-shadow: #0005 0 0 10px;
44 opacity: 0;
45}
46
47.photo-context-menu > div{
48 padding: 2px 10px;
49 width: 100;
50 text-align: center;
51 transition: 0.1s;
52}
53
54.photo-context-menu > div:hover{
55 color: #fff;
56 cursor: pointer;
57 user-select: none;
58 -webkit-user-select: none;
59}
60
61.image-container{
62 height: 100%;
63 background-size: contain !important;
64 background-repeat: no-repeat !important;
65 background-position: center !important;
66 opacity: 0;
67}
68
69.viewer-button{
70 color: white;
71 width: 30px;
72 height: 30px;
73 display: flex;
74 justify-content: center;
75 align-items: center;
76 border-radius: 50px;
77 font-size: 12px;
78 background: #8885;
79 user-select: none;
80 -webkit-user-select: none;
81 cursor: pointer;
82 z-index: 7;
83 box-shadow: #0008 0 0 10px;
84}
85
86.viewer-close{
87 position: fixed;
88 top: 10px;
89 right: 10px;
90 width: 35px;
91 height: 35px;
92}
93
94.prev-button{
95 transition: 0.25s;
96 position: fixed;
97 top: 50%;
98 left: 0;
99 color: white;
100 width: 50px;
101 height: 150px;
102 display: flex;
103 justify-content: center;
104 align-items: center;
105 transform: translateY(-50%);
106 background: rgba(255, 255, 255, 0.144);
107 border-radius: 0 15px 15px 0;
108 cursor: pointer;
109 user-select: none;
110 -webkit-user-select: none;
111 box-shadow: #000 0 0 10px;
112}
113
114.prev-button:hover{
115 background: rgba(255, 255, 255, 0.349);
116}
117
118.next-button{
119 transition: 0.25s;
120 position: fixed;
121 top: 50%;
122 right: 0;
123 color: white;
124 width: 50px;
125 height: 150px;
126 display: flex;
127 justify-content: center;
128 align-items: center;
129 transform: translateY(-50%);
130 background: rgba(255, 255, 255, 0.144);
131 border-radius: 15px 0 0 15px;
132 cursor: pointer;
133 user-select: none;
134 -webkit-user-select: none;
135 box-shadow: #000 0 0 10px;
136}
137
138.next-button:hover{
139 background: rgba(255, 255, 255, 0.349);
140}
141
142.control-buttons{
143 position: fixed;
144 bottom: 10px;
145 left: 50%;
146 transform: translateX(-50%);
147 display: flex;
148}
149
150.control-buttons div{
151 margin: 0 20px;
152}
153
154.copy-notif{
155 position: fixed;
156 top: 40px;
157 left: 50%;
158 color: white;
159 transform: translateX(-50%) translateY(-100px);
160 background: #8885;
161 padding: 10px 40px;
162 backdrop-filter: blur(10px);
163 -webkit-backdrop-filter: blur(10px);
164 border-radius: 50px;
165 box-shadow: #000 0 0 10px;
166 z-index: 12;
167 opacity: 0;
168 pointer-events: none;
169}