mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-11-10 17:04:49 +08:00
fix: crt funbox causing webkit browsers to go into refresh loop (fehmer) (#4557)
* fix: Fixed CRT funbox causes webkit browsers to go into refresh loop #4553 * review comments * updated message, increased notification duration --------- Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
Christian Fehmer
GitHub
parent
7edabd7977
commit
43de3021a5
2 changed files with 151 additions and 146 deletions
|
|
@ -700,6 +700,27 @@ FunboxList.setFunboxFunctions("morse", {
|
|||
|
||||
FunboxList.setFunboxFunctions("crt", {
|
||||
applyGlobalCSS(): void {
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
if (isSafari) {
|
||||
//Workaround for bug https://bugs.webkit.org/show_bug.cgi?id=256171 in Safari 16.5 or earlier
|
||||
const versionMatch = navigator.userAgent.match(
|
||||
/.*Version\/([0-9]*)\.([0-9]*).*/
|
||||
);
|
||||
const mainVersion = versionMatch !== null ? parseInt(versionMatch[1]) : 0;
|
||||
const minorVersion =
|
||||
versionMatch !== null ? parseInt(versionMatch[2]) : 0;
|
||||
if (mainVersion <= 16 && minorVersion <= 5) {
|
||||
Notifications.add(
|
||||
"CRT is not available on Safari 16.5 or earlier.",
|
||||
0,
|
||||
{
|
||||
duration: 5,
|
||||
}
|
||||
);
|
||||
toggleFunbox("crt");
|
||||
return;
|
||||
}
|
||||
}
|
||||
$("body").append('<div id="scanline" />');
|
||||
$("body").addClass("crtmode");
|
||||
$("#globalFunBoxTheme").attr("href", `funbox/crt.css`);
|
||||
|
|
|
|||
|
|
@ -1,147 +1,131 @@
|
|||
body.crtmode {
|
||||
.customBackground {
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
var(--crt-bg-color-shine) 0%,
|
||||
var(--bg-color) 90%
|
||||
);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 999999999;
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--crt-bg-color-stripe) 0px,
|
||||
var(--crt-bg-color-stripe) 1px,
|
||||
transparent 2px,
|
||||
transparent 5px
|
||||
);
|
||||
background-size: 50% 5px;
|
||||
opacity: 0.3;
|
||||
mix-blend-mode: color-burn;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#scanline {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
var(--crt-bg-color-shine) 10%,
|
||||
rgba(0, 0, 0, 0.1) 100%
|
||||
);
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
|
||||
#top,
|
||||
#middle,
|
||||
#bottom,
|
||||
#result,
|
||||
#popups,
|
||||
#notificationCenter,
|
||||
.word.error,
|
||||
input,
|
||||
textarea,
|
||||
#bannerCenter .banner {
|
||||
text-shadow: 3px 0 1px color-mix(in srgb, currentColor 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, currentColor 30%, transparent), 0 0 3px;
|
||||
}
|
||||
|
||||
#testConfig,
|
||||
#testModesNotice {
|
||||
text-shadow: none;
|
||||
|
||||
.textButton {
|
||||
text-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow), 0 0 3px;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow), 0 0 3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
text-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow);
|
||||
}
|
||||
}
|
||||
|
||||
#caret {
|
||||
box-shadow: 3px 0 1px var(--crt-caret-color-glow),
|
||||
-3px 0 var(--crt-caret-color-glow);
|
||||
}
|
||||
|
||||
#paceCaret,
|
||||
key,
|
||||
#bannerCenter .banner {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow);
|
||||
}
|
||||
|
||||
#caret,
|
||||
#paceCaret {
|
||||
&.banana,
|
||||
&.carrot {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo .icon {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
|
||||
}
|
||||
|
||||
.avatars,
|
||||
#menu .account .avatar,
|
||||
#menu .account .levelAndBar,
|
||||
#top.focus .logo .icon {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
|
||||
}
|
||||
|
||||
.button,
|
||||
.scrollToTopButton {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow),
|
||||
0 0 3px var(--crt-sub-alt-color-glow);
|
||||
|
||||
&.active {
|
||||
box-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow), 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#keymap .keymapKey {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow), 0 0 3px;
|
||||
|
||||
&.activeKey {
|
||||
box-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
}
|
||||
body.crtmode .customBackground {
|
||||
background: radial-gradient(
|
||||
ellipse,
|
||||
var(--crt-bg-color-shine) 0%,
|
||||
var(--bg-color) 90%
|
||||
);
|
||||
}
|
||||
body.crtmode::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 999999999;
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--crt-bg-color-stripe) 0px,
|
||||
var(--crt-bg-color-stripe) 1px,
|
||||
transparent 2px,
|
||||
transparent 5px
|
||||
);
|
||||
background-size: 50% 5px;
|
||||
opacity: 0.3;
|
||||
mix-blend-mode: color-burn;
|
||||
pointer-events: none;
|
||||
}
|
||||
body.crtmode #scanline {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
var(--crt-bg-color-shine) 10%,
|
||||
rgba(0, 0, 0, 0.1) 100%
|
||||
);
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
body.crtmode #top,
|
||||
body.crtmode #middle,
|
||||
body.crtmode #bottom,
|
||||
body.crtmode #result,
|
||||
body.crtmode #popups,
|
||||
body.crtmode #notificationCenter,
|
||||
body.crtmode .word.error,
|
||||
body.crtmode input,
|
||||
body.crtmode textarea,
|
||||
body.crtmode #bannerCenter .banner {
|
||||
text-shadow: 3px 0 1px color-mix(in srgb, currentColor 20%, transparent),
|
||||
-3px 0 color-mix(in srgb, currentColor 30%, transparent), 0 0 3px;
|
||||
}
|
||||
body.crtmode #testConfig,
|
||||
body.crtmode #testModesNotice {
|
||||
text-shadow: none;
|
||||
}
|
||||
body.crtmode #testConfig .textButton,
|
||||
body.crtmode #testModesNotice .textButton {
|
||||
text-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode #testConfig .textButton:hover,
|
||||
body.crtmode #testModesNotice .textButton:hover {
|
||||
text-shadow: 3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode #testConfig .textButton.active,
|
||||
body.crtmode #testModesNotice .textButton.active {
|
||||
text-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode #testConfig .row,
|
||||
body.crtmode #testModesNotice .row {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow);
|
||||
}
|
||||
body.crtmode #caret {
|
||||
box-shadow: 3px 0 1px var(--crt-caret-color-glow),
|
||||
-3px 0 var(--crt-caret-color-glow);
|
||||
}
|
||||
body.crtmode #paceCaret,
|
||||
body.crtmode key,
|
||||
body.crtmode #bannerCenter .banner {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow);
|
||||
}
|
||||
body.crtmode #caret.banana,
|
||||
body.crtmode #caret.carrot,
|
||||
body.crtmode #paceCaret.banana,
|
||||
body.crtmode #paceCaret.carrot {
|
||||
box-shadow: none;
|
||||
}
|
||||
body.crtmode .logo .icon {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
|
||||
}
|
||||
body.crtmode .avatars,
|
||||
body.crtmode #menu .account .avatar,
|
||||
body.crtmode #menu .account .levelAndBar,
|
||||
body.crtmode #top.focus .logo .icon {
|
||||
filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
|
||||
drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
|
||||
}
|
||||
body.crtmode .button,
|
||||
body.crtmode .scrollToTopButton {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-alt-color-glow),
|
||||
-3px 0 var(--crt-sub-alt-color-glow), 0 0 3px var(--crt-sub-alt-color-glow);
|
||||
}
|
||||
body.crtmode .button.active,
|
||||
body.crtmode .scrollToTopButton.active {
|
||||
box-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode .button:hover,
|
||||
body.crtmode .scrollToTopButton:hover {
|
||||
box-shadow: 3px 0 1px var(--crt-text-color-glow),
|
||||
-3px 0 var(--crt-text-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode #keymap .keymapKey {
|
||||
box-shadow: 3px 0 1px var(--crt-sub-color-glow),
|
||||
-3px 0 var(--crt-sub-color-glow), 0 0 3px;
|
||||
}
|
||||
body.crtmode #keymap .keymapKey.activeKey {
|
||||
box-shadow: 3px 0 1px var(--crt-main-color-glow),
|
||||
-3px 0 var(--crt-main-color-glow), 0 0 3px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue