Art Update
Changed: - Removed overlay and mask - New art
@@ -81,7 +81,7 @@ p {
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-image: url("src/Books/BookBar_v5_f0000.png");
|
background-image: url("src/Books/BookBar_v8_f0000.png");
|
||||||
}
|
}
|
||||||
.barFlashHelper {
|
.barFlashHelper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -91,24 +91,9 @@ p {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-image: url("src/Books/BookBar_v5_f0000.png");
|
background-image: url("src/Books/BookBar_v8_f0000.png");
|
||||||
}
|
}
|
||||||
#barBack {
|
#barBack {
|
||||||
}
|
}
|
||||||
#barFront {
|
#barFront {
|
||||||
}
|
|
||||||
#paperOverlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
opacity: 1;
|
|
||||||
background-image: url("src/Paper_v4.png");
|
|
||||||
mask-image: url("https://lilac.thewisewolf.dev/BookBar/src/BookBar_Mask.png");
|
|
||||||
mask-mode: luminance;
|
|
||||||
mask-size: 100%;
|
|
||||||
mix-blend-mode: soft-light;
|
|
||||||
}
|
}
|
||||||
@@ -22,7 +22,7 @@ class ProgressBar {
|
|||||||
if (index_string.length < 2) {
|
if (index_string.length < 2) {
|
||||||
index_string = "0" + index_string;
|
index_string = "0" + index_string;
|
||||||
}
|
}
|
||||||
img_fetcher.src = "src/Books/BookBar_v5_f00" + index_string + ".png";
|
img_fetcher.src = "src/Books/BookBar_v8_f00" + index_string + ".png";
|
||||||
image_cache.push(img_fetcher);
|
image_cache.push(img_fetcher);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -33,12 +33,12 @@ class ProgressBar {
|
|||||||
if (val_string.length < 2) {
|
if (val_string.length < 2) {
|
||||||
val_string = "0" + val_string;
|
val_string = "0" + val_string;
|
||||||
}
|
}
|
||||||
this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
|
this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v8_f00" + val_string + ".png)";
|
||||||
setTimeout(this.antiFlash.bind(this), 150, val_string, val);
|
setTimeout(this.antiFlash.bind(this), 150, val_string, val);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
antiFlash(val_string, new_val) {
|
antiFlash(val_string, new_val) {
|
||||||
this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
|
this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v8_f00" + val_string + ".png)";
|
||||||
if ((new_val >= 0) && (new_val <= this.max_progress)) {
|
if ((new_val >= 0) && (new_val <= this.max_progress)) {
|
||||||
this.current_progress = new_val;
|
this.current_progress = new_val;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,8 +15,6 @@
|
|||||||
<div id='progressBar' class="layoutContainer">
|
<div id='progressBar' class="layoutContainer">
|
||||||
<div id='barBack' class='barFlashHelper'></div>
|
<div id='barBack' class='barFlashHelper'></div>
|
||||||
<div id='barFront' class='barFlashHelper'>
|
<div id='barFront' class='barFlashHelper'>
|
||||||
<div id='paperOverlay'>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 221 KiB |
|
Before Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 246 KiB |
|
Before Width: | Height: | Size: 251 KiB |
|
Before Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 263 KiB |
|
Before Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 270 KiB |
|
Before Width: | Height: | Size: 274 KiB |
|
Before Width: | Height: | Size: 279 KiB |
|
Before Width: | Height: | Size: 281 KiB |
|
Before Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 289 KiB |
|
Before Width: | Height: | Size: 294 KiB |
|
Before Width: | Height: | Size: 298 KiB |
|
Before Width: | Height: | Size: 300 KiB |
|
Before Width: | Height: | Size: 304 KiB |
|
Before Width: | Height: | Size: 307 KiB |
|
Before Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 314 KiB |
|
Before Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 320 KiB |
|
Before Width: | Height: | Size: 324 KiB |
|
Before Width: | Height: | Size: 327 KiB |
|
Before Width: | Height: | Size: 330 KiB |
|
Before Width: | Height: | Size: 334 KiB |
|
Before Width: | Height: | Size: 336 KiB |
|
Before Width: | Height: | Size: 340 KiB |
|
Before Width: | Height: | Size: 344 KiB |
|
Before Width: | Height: | Size: 348 KiB |
|
Before Width: | Height: | Size: 351 KiB |
|
Before Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 358 KiB |
|
Before Width: | Height: | Size: 361 KiB |
|
Before Width: | Height: | Size: 364 KiB |
|
Before Width: | Height: | Size: 367 KiB |
|
Before Width: | Height: | Size: 370 KiB |
|
Before Width: | Height: | Size: 372 KiB |
|
Before Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 380 KiB |
|
Before Width: | Height: | Size: 383 KiB |
|
Before Width: | Height: | Size: 385 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 255 KiB |
|
After Width: | Height: | Size: 259 KiB |
|
After Width: | Height: | Size: 265 KiB |
|
After Width: | Height: | Size: 270 KiB |
|
After Width: | Height: | Size: 274 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 287 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 296 KiB |
|
After Width: | Height: | Size: 300 KiB |
|
After Width: | Height: | Size: 303 KiB |
|
After Width: | Height: | Size: 307 KiB |
|
After Width: | Height: | Size: 311 KiB |
|
After Width: | Height: | Size: 316 KiB |
|
After Width: | Height: | Size: 320 KiB |
|
After Width: | Height: | Size: 323 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 329 KiB |
|
After Width: | Height: | Size: 333 KiB |
|
After Width: | Height: | Size: 335 KiB |
|
After Width: | Height: | Size: 338 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
After Width: | Height: | Size: 343 KiB |
|
After Width: | Height: | Size: 347 KiB |
|
After Width: | Height: | Size: 352 KiB |
|
After Width: | Height: | Size: 354 KiB |
|
After Width: | Height: | Size: 358 KiB |
|
After Width: | Height: | Size: 363 KiB |
|
After Width: | Height: | Size: 366 KiB |
|
After Width: | Height: | Size: 368 KiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 380 KiB |
|
After Width: | Height: | Size: 385 KiB |
|
After Width: | Height: | Size: 386 KiB |
|
After Width: | Height: | Size: 389 KiB |
|
After Width: | Height: | Size: 392 KiB |
|
After Width: | Height: | Size: 397 KiB |
|
After Width: | Height: | Size: 400 KiB |
|
After Width: | Height: | Size: 402 KiB |
|
After Width: | Height: | Size: 408 KiB |
|
After Width: | Height: | Size: 408 KiB |