From: Scott Worley Date: Fri, 28 Feb 2014 07:08:22 +0000 (-0800) Subject: Add a message-displaying area X-Git-Url: http://git.scottworley.com/picsort/commitdiff_plain/0dd95dc285a0188fdcb89aec0dd7eb6acb137f17?hp=2d325f41181d0bf021f09fec06c95d49ff123e8c Add a message-displaying area --- diff --git a/picsorter.css b/picsorter.css index d6cd666..b99fc9e 100644 --- a/picsorter.css +++ b/picsorter.css @@ -1,3 +1,32 @@ +@-webkit-keyframes fadeOut { + from { opacity: 1; } + to { opacity: 0; } +} +@keyframes fadeOut { + from { opacity: 1; } + to { opacity: 0; } +} + +#message { + position: fixed; + font-size: 18pt; + margin: 2em; + border-radius: 10px; + padding: .3em; + color: white; + font-weight: bold; + font-family: sans-serif; + background-color: rgba(200,200,200,0.5); +} + +.fade { + opacity: 0; + animation-duration: 2s; + animation-name: fadeOut; + -webkit-animation-duration: 2s; + -webkit-animation-name: fadeOut; +} + .fit_view { max-width: 100%; max-height: 100%; diff --git a/picsorter.html b/picsorter.html index a6bbaa9..f609060 100644 --- a/picsorter.html +++ b/picsorter.html @@ -7,6 +7,7 @@ +

Welcome to picsorter