mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-18 09:22:31 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

toast appearance

Browse source
This commit is contained in:
ed 2021-07-27 11:48:32 +02:00
parent e0f1cb94a5
commit 5f1f0a48b0
3 changed files with 41 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
copyparty/web/browser.css
View file

@ -45,29 +45,39 @@ body {
#toast { #toast {
top: 1.4em; top: 1.4em;
right: -1em; right: -1em;
line-height: 1.5em;
padding: 1em 1.3em; padding: 1em 1.3em;
border-width: .4em 0; border-width: .4em 0;
transform: translateX(100%); transform: translateX(100%);
transition: all .3s cubic-bezier(.2, 1.2, .5, 1); transition: all .4s cubic-bezier(.2, 1.2, .5, 1);
text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000;
color: #fff; color: #fff;
} }
#toastc { #toastc {
position: relative; display: inline-block;
left: -2.35em; position: absolute;
margin: 0 -1.05em; overflow: hidden;
padding: .5em .8em; left: 0;
border-radius: .3em 0 0 .3em; width: 0;
color: #000;
text-shadow: none;
opacity: 0; opacity: 0;
transition: all .3s cubic-bezier(.2, 1.2, .5, 1); padding: .3em 0;
margin: -.3em 0 0 0;
line-height: 1.5em;
color: #000;
border: none;
outline: none;
text-shadow: none;
border-radius: .5em 0 0 .5em;
transition: all .4s cubic-bezier(.2, 1, .5, 1);
} }
#toast.vis { #toast.vis {
right: 1.3em; right: 1.3em;
transform: unset; transform: unset;
} }
#toast.vis #toastc { #toast.vis #toastc {
left: -2em;
width: .4em;
padding: .3em .8em;
opacity: 1; opacity: 1;
} }
#toast.inf { #toast.inf {

28
copyparty/web/md.css
View file

@ -28,29 +28,39 @@ html, body {
#toast { #toast {
top: 1.4em; top: 1.4em;
right: -1em; right: -1em;
line-height: 1.5em;
padding: 1em 1.3em; padding: 1em 1.3em;
border-width: .4em 0; border-width: .4em 0;
transform: translateX(100%); transform: translateX(100%);
transition: all .3s cubic-bezier(.2, 1.2, .5, 1); transition: all .4s cubic-bezier(.2, 1.2, .5, 1);
text-shadow: 1px 1px 0 #000; text-shadow: 1px 1px 0 #000;
color: #fff; color: #fff;
} }
#toastc { #toastc {
position: relative; display: inline-block;
left: -2.35em; position: absolute;
margin: 0 -1.05em; overflow: hidden;
padding: .5em .8em; left: 0;
border-radius: .3em 0 0 .3em; width: 0;
color: #000;
text-shadow: none;
opacity: 0; opacity: 0;
transition: all .3s cubic-bezier(.2, 1.2, .5, 1); padding: .3em 0;
margin: -.3em 0 0 0;
line-height: 1.5em;
color: #000;
border: none;
outline: none;
text-shadow: none;
border-radius: .5em 0 0 .5em;
transition: all .4s cubic-bezier(.2, 1, .5, 1);
} }
#toast.vis { #toast.vis {
right: 1.3em; right: 1.3em;
transform: unset; transform: unset;
} }
#toast.vis #toastc { #toast.vis #toastc {
left: -2em;
width: .4em;
padding: .3em .8em;
opacity: 1; opacity: 1;
} }
#toast.inf { #toast.inf {

4
copyparty/web/util.js
View file

@ -674,7 +674,9 @@ var toast = (function () {
hp[a].replace(/<br ?.?>\n/g, '\n').replace(/\n<br ?.?>/g, '\n').replace(/\n/g, '<br />\n'); hp[a].replace(/<br ?.?>\n/g, '\n').replace(/\n<br ?.?>/g, '\n').replace(/\n/g, '<br />\n');
obj.innerHTML = '<a href="#" id="toastc">x</a>' + html; obj.innerHTML = '<a href="#" id="toastc">x</a>' + html;
obj.className = cl + ' vis'; obj.className = cl;
ms += obj.offsetWidth;
obj.className += ' vis';
ebi('toastc').onclick = r.hide; ebi('toastc').onclick = r.hide;
r.visible = true; r.visible = true;
}; };