RolimirKal
b656d02547
Simple bare-bones book progress bar with a test animation running. Changes: - Migrated to a new repo because the whole project was in the wrong local directory.. oops - Removed remaining unrelated timer files and code. TODO: - Remove IMGUR hotlink - Update book art - Proper input value testing - Get websocket connected and tested
114 lines
2.0 KiB
CSS
114 lines
2.0 KiB
CSS
:root {
|
|
--time-color: #453960;
|
|
--details-color: #403060;
|
|
--background-color: transparent;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Courier Prime", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
background-color: var(--background-color);
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
main {
|
|
font-family: "Courier Prime", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
color: #0f0908;
|
|
height: 100%;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 3.6em;
|
|
color: #404145;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 1.4em;
|
|
color: #0f0908;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
font-size: 1em;
|
|
color: #0f0908;
|
|
font-weight: normal;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
|
|
/*
|
|
*** Progres Bar Widget ***
|
|
*/
|
|
|
|
|
|
.widgetContainer {
|
|
aspect-ratio: 195/32;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
position: relative;
|
|
text-align: center;
|
|
container-type: inline-size;
|
|
container-name: sidebar;
|
|
}
|
|
.layoutContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url("src/Books/BookBar_v5_f0000.png");
|
|
}
|
|
.barFlashHelper {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url("src/Books/BookBar_v5_f0000.png");
|
|
}
|
|
#barBack {
|
|
}
|
|
#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://i.imgur.com/lseOCYA.png");
|
|
mask-mode: luminance;
|
|
mask-size: 100%;
|
|
mix-blend-mode: soft-light;
|
|
} |