A photo manager for VRChat.
1.settings{
2 position: fixed;
3 top: 0;
4 left: 0;
5 width: 100%;
6 height: 100%;
7 background: rgba(0, 0, 0, 0.4);
8}
9
10.settings-container{
11 position: fixed;
12 top: 50px;
13 left: 0px;
14 width: 200%;
15 height: calc(100% - 100px);
16 display: flex;
17}
18
19.settings-close{
20 position: absolute;
21 top: 10px;
22 left: 10px;
23 z-index: 100;
24 cursor: pointer;
25 user-select: none;
26 width: 40px;
27 height: 40px;
28}
29
30.settings-block{
31 width: 50%;
32 height: 100%;
33 color: white;
34 text-align: center;
35}
36
37.selector{
38 padding: 10px 20px;
39 border-radius: 10px;
40 background: #000a;
41 display: inline-block;
42 margin: 10px;
43}
44
45.selector .selection-box{
46 height: 20px;
47 background: #777a;
48 margin: 5px -10px 0 -10px;
49 border-radius: 8px;
50 user-select: none;
51 -webkit-user-select: none;
52 cursor: pointer;
53 transition: 0.25s;
54 color: #fff1;
55}
56
57.selector .selection-box:hover{
58 height: 20px;
59 background: #777a;
60 margin: 5px -10px 0 -10px;
61 border-radius: 8px;
62 user-select: none;
63 -webkit-user-select: none;
64 cursor: pointer;
65 transition: 0.25s;
66 color: #fff5;
67}
68
69.selector input{
70 display: none;
71}
72
73.selector input:checked ~ label .selection-box{
74 background: rgba(0, 146, 204, 0.705);
75 color: #fff;
76}
77
78.path{
79 padding: 5px 10px;
80 background: #000a;
81 border-radius: 5px;
82 margin-left: 5px;
83 cursor: pointer;
84}