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: rgba(43, 43, 43, 0.76);
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 max-width: none;
63 max-height: none;
64 background-size: contain !important;
65 background-repeat: no-repeat !important;
66 background-position: center !important;
67 opacity: 0;
68}
69
70.viewer-button{
71 color: white;
72 width: 30px;
73 height: 30px;
74 display: flex;
75 justify-content: center;
76 align-items: center;
77 border-radius: 50px;
78 font-size: 12px;
79 background: #8885;
80 user-select: none;
81 -webkit-user-select: none;
82 cursor: pointer;
83 z-index: 7;
84 background: rgba(43, 43, 43, 0.76);
85}
86
87.viewer-close{
88 position: fixed;
89 top: 10px;
90 right: 10px;
91 width: 35px;
92 height: 35px;
93}
94
95.prev-button{
96 transition: 0.25s;
97 position: fixed;
98 top: 50%;
99 left: 0;
100 color: white;
101 width: 50px;
102 height: 150px;
103 display: flex;
104 justify-content: center;
105 align-items: center;
106 transform: translateY(-50%);
107 background: rgba(255, 255, 255, 0.144);
108 border-radius: 0 15px 15px 0;
109 cursor: pointer;
110 user-select: none;
111 -webkit-user-select: none;
112 box-shadow: #000 0 0 10px;
113}
114
115.prev-button:hover{
116 background: rgba(255, 255, 255, 0.349);
117}
118
119.next-button{
120 transition: 0.25s;
121 position: fixed;
122 top: 50%;
123 right: 0;
124 color: white;
125 width: 50px;
126 height: 150px;
127 display: flex;
128 justify-content: center;
129 align-items: center;
130 transform: translateY(-50%);
131 background: rgba(255, 255, 255, 0.144);
132 border-radius: 15px 0 0 15px;
133 cursor: pointer;
134 user-select: none;
135 -webkit-user-select: none;
136 box-shadow: #000 0 0 10px;
137}
138
139.next-button:hover{
140 background: rgba(255, 255, 255, 0.349);
141}
142
143.control-buttons{
144 position: fixed;
145 bottom: 10px;
146 left: 50%;
147 transform: translateX(-50%);
148 display: flex;
149}
150
151.control-buttons div{
152 margin: 0 20px;
153}
154
155.copy-notif{
156 position: fixed;
157 top: 40px;
158 left: 50%;
159 color: white;
160 transform: translateX(-50%) translateY(-100px);
161 background: rgba(43, 43, 43, 0.76);
162 padding: 10px 40px;
163 backdrop-filter: blur(10px);
164 -webkit-backdrop-filter: blur(10px);
165 border-radius: 50px;
166 box-shadow: #000 0 0 10px;
167 z-index: 12;
168 opacity: 0;
169 pointer-events: none;
170}
171
172.photo-layer-manager{
173 background: rgba(43, 43, 43, 0.76);
174 color: #fff;
175 padding: 10px;
176 backdrop-filter: blur(10px);
177 position: fixed;
178 bottom: 10px;
179 left: 10px;
180 border-radius: 10px;
181}
182
183.photo-layer-manager-layer{
184 cursor: pointer;
185 -webkit-user-select: none;
186 user-select: none;
187 padding: 5px 20px;
188 transition: 0.1s;
189}
190
191.photo-layer-manager-layer:hover{
192 color: #bbb;
193}