File size: 5,455 Bytes
fc3a5ac
2cd53e6
7f3a925
 
 
fc3a5ac
11254d8
b002f06
 
 
 
 
11254d8
b002f06
 
11254d8
 
 
 
 
fc3a5ac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b002f06
11254d8
 
 
 
fc3a5ac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11254d8
 
 
 
 
 
 
 
 
 
 
 
 
 
fc3a5ac
11254d8
 
 
fc3a5ac
 
 
 
 
11254d8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fc3a5ac
 
 
 
11254d8
 
 
 
 
 
 
 
 
 
fc3a5ac
 
 
 
 
 
 
 
11254d8
 
fc3a5ac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
/* .gradio-container {
    background: url('https://storage.googleapis.com/wpassets.junyiacademy.org/1/2023/11/background-scaled.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
} */

#player_avatar_container {
    place-items: center;
}

#player_avatar {
    background-color: transparent !important;
    width: 20vw; 
    height: 20vw;
    border-radius: 50% !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: #fff !important;
}

.achievements{
    margin: 0 auto;
    width: 80%;
    height: 200px !important;
    overflow: auto !important;

}

.achievements  [data-testid="block-label"] {
    display: none;
}

[data-testid="number-input"] {
    display: None !important;
}

#adventure_slider {
    overflow: auto !important;
    height: 200px;
}

#adventure_slider div{
    color: #232323 !important;
    font-size: large;
}

.textfield > * { 
    border-radius: 8px !important;
    display: block; 
    padding-left: .75rem !important;
    margin: 0.3rem auto;
    margin-left: 0px !important;
  }

#adventure_container {
    height: 200px;
}

#player_avatar_description h1{
    font-size: 2.5rem;
    text-align: center;
}

h1{
    font-size: 2rem;
    text-align: center;
    font-weight: 100 !important;
}

h1::after {
    content: '';
    display: block;
    width: 25%; /* Adjust this value to control the width of the line */
    height: 4px; /* Thickness of the line */
    border-radius: 4px;
    background: #12d2ab; /* Color of the line */
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%); /* This centers the line */
}

#achievements_description h1{
    font-size: 2rem;
    text-align: center;
}

#badge_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_log {
    margin: 2.5rem auto 0 auto;
}

#achievement_log {
    overflow: auto !important;
    height: 200px;
}

#pet_gallery .grid-wrap button  {
    margin: .5vh;
    background: transparent !important;
    border-color: transparent !important;
    height: 150px !important;
    width: 6vh !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#pet_gallery .grid-container {
    grid-template-columns: repeat(30, minmax(6vh, 1fr));
}

#badge_gallery .grid-wrap button {
    margin: .5vh;
    height: 150px !important;
    width: 10vh !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); 
}

.preview button {
    color: #000;
}
    
::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

[data-testid="block-label"] {
    opacity: 0;
}

[for="range_id_0"] div{
    background: #e4e4e48a;
    border-radius: 20px;
    padding: 5%;
    margin: 5%;
    line-height: 1.8;
}

[aria-label="Share"] {
    opacity: 0;
}

#adventure_slider {
    display: flex;
    flex-direction: column;
}

input[type="range"]{
    order: -1;
}

input[type="range"] {
    -webkit-appearance: none; /* Removes default styling for Webkit browsers */
    height: 20px; /* Makes the track thicker */
    background: linear-gradient(#12d2ab, #16a1b1);
    box-shadow: 0 0 10px #16a1b1;
    border-radius: 20px; /* Round corners of the track */
    padding: 20px;
    margin: 10px 0;
    order: -1;

  }
  
  /* Styles for the slider thumb for Webkit browsers like Chrome and Safari */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Overrides default webkit styles */
    appearance: none;
    height: 24px; /* Height of the thumb */
    width: 24px; /* Width of the thumb */
    border-radius: 50%; /* Rounded corners of the thumb */
    background: #f3b968; /* Background color of the thumb */
    margin-top: -6px; /* Ensures the thumb aligns with the track */
    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e;
  }
  
  /* Styles for the slider thumb for Firefox */
  input[type="range"]::-moz-range-thumb {
    width: 20px; /* Width of the thumb */
    height: 28px; /* Height of the thumb */
    border-radius: 5px; /* Rounded corners of the thumb */
    background: #4CAF50; /* Background color of the thumb */
  }
  
  /* Styles for the slider thumb for IE */
  input[type="range"]::-ms-thumb {
    width: 20px; /* Width of the thumb */
    height: 28px; /* Height of the thumb */
    border-radius: 5px; /* Rounded corners of the thumb */
    background: #4CAF50; /* Background color of the thumb */
  }
  
  /* Styles for the track (progress) for Webkit browsers */
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px; /* Height of the track */
    background: #eee;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset;
    border-radius: 10px; /* Rounded corners of the track */
  }
  
  /* Styles for the track for Firefox */
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 30px; /* Height of the track */
    background: #eee;
    border-radius: 10px; /* Rounded corners of the track */
  }
  
  /* Styles for the track for IE */
  input[type="range"]::-ms-track {
    width: 100%;
    height: 30px; /* Height of the track */
    background: #eee;
    border-radius: 10px; /* Rounded corners of the track */
    border: none; /* IE may require removing the border */
  }