smparkin/epoch-flip-clock-screensaver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

light/dark mode and update to WKWebView

Browse Source
This commit is contained in:
Stephen Parkinson
2023-01-24 22:07:55 -08:00
parent cfc75c2ce7
commit 1d7d7a0fc6
4 changed files with 208 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
Webview/index.css
View File

@@ -3,16 +3,32 @@ html, body {
height: 100%;
}
body {
display: flex;
margin: 0;
padding: 0;
font-family: '-apple-system', sans-serif;
align-items: center;
justify-content: center;
background-color: black;
perspective: 100vw;
-webkit-text-smoothing: anti-aliased;
@media (prefers-color-scheme: dark) {
body {
display: flex;
margin: 0;
padding: 0;
font-family: '-apple-system', sans-serif;
align-items: center;
justify-content: center;
background-color: black;
perspective: 100vw;
-webkit-text-smoothing: anti-aliased;
}
}
@media (prefers-color-scheme: light) {
body {
display: flex;
margin: 0;
padding: 0;
font-family: '-apple-system', sans-serif;
align-items: center;
justify-content: center;
background-color: white;
perspective: 100vw;
-webkit-text-smoothing: anti-aliased;
}
}
digit {
@@ -25,23 +41,46 @@ digit {
/* Flip Flaps
------------------------------------------------*/
flap-top,
flap-top-flip,
flap-bottom,
flap-bottom-flip {
box-sizing: border-box;
position: absolute;
display: flex;
width: 100%;
height: 50%;
left: 0;
justify-content: center;
overflow: hidden;
color: #e1e1e1;
background-color: rgb(12,12,12);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
-webkit-backface-visibility: hidden;
@media (prefers-color-scheme: dark) {
flap-top,
flap-top-flip,
flap-bottom,
flap-bottom-flip {
box-sizing: border-box;
position: absolute;
display: flex;
width: 100%;
height: 50%;
left: 0;
justify-content: center;
overflow: hidden;
color: #e1e1e1;
background-color: rgb(12,12,12);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
-webkit-backface-visibility: hidden;
}
}
@media (prefers-color-scheme: light) {
flap-top,
flap-top-flip,
flap-bottom,
flap-bottom-flip {
box-sizing: border-box;
position: absolute;
display: flex;
width: 100%;
height: 50%;
left: 0;
justify-content: center;
overflow: hidden;
color: #323232;
background-color: rgb(200,200,200);
box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.04);
-webkit-backface-visibility: hidden;
}
}
flap-top,
flap-top-flip {
top: 0;
@@ -129,69 +168,140 @@ n {
/* Animations
------------------------------------------------*/
@keyframes flip-top-down {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-90deg);
color: black;
background-color: black;
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
@media (prefers-color-scheme: light) {
@keyframes flip-top-down {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-90deg);
color: gray;
background-color: gray;
}
}
@keyframes flip-bottom-down {
0% {
color: black;
background-color: rgb(220,220,220);
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
@media screen and (min-width: 800px) {
@keyframes flip-top-down {
0% {
transform: translateY(-1px) rotateX(0);
}
100% {
transform: translateY(-1px) rotateX(-90deg);
color: gray;
background-color: gray;
}
}
@keyframes flip-bottom-down {
0% {
color: black;
background-color: rgb(220,220,220);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
}
@media screen and (min-width: 1280px) {
@keyframes flip-top-down {
0% {
transform: translateY(-2px) rotateX(0);
}
100% {
transform: translateY(-2px) rotateX(-90deg);
color: gray;
background-color: gray;
}
}
@keyframes flip-bottom-down {
0% {
color: black;
background-color: rgb(220,220,220);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
}
}
@media screen and (min-width: 800px) {
@keyframes flip-top-down {
0% {
transform: translateY(-1px) rotateX(0);
@media (prefers-color-scheme: dark) {
@keyframes flip-top-down {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(-90deg);
color: black;
background-color: black;
}
}
100% {
transform: translateY(-1px) rotateX(-90deg);
color: black;
background-color: black;
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
}
@media screen and (min-width: 1280px) {
@keyframes flip-top-down {
0% {
transform: translateY(-2px) rotateX(0);
@media screen and (min-width: 800px) {
@keyframes flip-top-down {
0% {
transform: translateY(-1px) rotateX(0);
}
100% {
transform: translateY(-1px) rotateX(-90deg);
color: black;
background-color: black;
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
}
100% {
transform: translateY(-2px) rotateX(-90deg);
color: black;
background-color: black;
@media screen and (min-width: 1280px) {
@keyframes flip-top-down {
0% {
transform: translateY(-2px) rotateX(0);
}
100% {
transform: translateY(-2px) rotateX(-90deg);
color: black;
background-color: black;
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
}

2
Webview/index.js
View File

@@ -45,7 +45,7 @@ function flipDigitTo(digit, currentVal, updatedVal, i) {
setTimeout(function() {
bottomFlapNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'none';
}, [10, 11, 12].includes(i) ? 45 : (10-i) * 450);
}, [10, 11, 12].includes(i) ? 45 : (10-i) * 425);
digit.setAttribute('current-val', updatedVal);
}