radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare reference screenshot 

Add ",compare-reference" to the URL to view a reference screenshot of MS Paint overlaid on top of JS Paint.
main
Isaiah Odhner 2021-11-25 23:34:35 -05:00
parent c70680c2b2
commit e14f00c895
3 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/mspaint-win98-reference.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

2
src/app.js
View File

@ -516,6 +516,8 @@ const update_from_url_params = ()=> {
} else {
window.disable_speech_recognition && disable_speech_recognition();
}
$("body").toggleClass("compare-reference", !!location.hash.match(/compare-reference/i));
};
update_from_url_params();
$G.on("hashchange popstate change-url-params", update_from_url_params);

21
styles/themes/classic.css
View File

@ -6,6 +6,27 @@
--theme-loaded: "classic.css";
}
/* .compare-reference is added to <body> when "compare-reference" is in the URL hash. */
.compare-reference::after {
content: url("../../images/mspaint-win98-reference.png");
position: fixed;
top: -23px;
left: -4px;
z-index: 10000;
opacity: 0.5;
transition: opacity 0.5s;
}
.compare-reference:hover::after {
opacity: 1;
}
.compare-reference:active::after {
opacity: 0;
}
.compare-reference {
width: calc(567px - 4px - 4px);
height: calc(402px - 23px - 4px);
}
.jspaint {
background: var(--ButtonFace);
}