mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -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 {
top: 1.4em;
right: -1em;
line-height: 1.5em;
padding: 1em 1.3em;
border-width: .4em 0;
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;
color: #fff;
}
#toastc {
position: relative;
left: -2.35em;
margin: 0 -1.05em;
padding: .5em .8em;
border-radius: .3em 0 0 .3em;
color: #000;
text-shadow: none;
display: inline-block;
position: absolute;
overflow: hidden;
left: 0;
width: 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 {
right: 1.3em;
transform: unset;
}
#toast.vis #toastc {
left: -2em;
width: .4em;
padding: .3em .8em;
opacity: 1;
}
#toast.inf {

28
copyparty/web/md.css
View file

@ -28,29 +28,39 @@ html, body {
#toast {
top: 1.4em;
right: -1em;
line-height: 1.5em;
padding: 1em 1.3em;
border-width: .4em 0;
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;
color: #fff;
}
#toastc {
position: relative;
left: -2.35em;
margin: 0 -1.05em;
padding: .5em .8em;
border-radius: .3em 0 0 .3em;
color: #000;
text-shadow: none;
display: inline-block;
position: absolute;
overflow: hidden;
left: 0;
width: 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 {
right: 1.3em;
transform: unset;
}
#toast.vis #toastc {
left: -2em;
width: .4em;
padding: .3em .8em;
opacity: 1;
}
#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');
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;
r.visible = true;
};