diff --git a/WebContent/public/css/message.css b/WebContent/public/css/message.css new file mode 100644 index 0000000..177abaa --- /dev/null +++ b/WebContent/public/css/message.css @@ -0,0 +1,147 @@ + body{ + background: rgba(0,0,0,0.9); + color: #DDD; + font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; + } + .border, + .rain{ + height: 500px; + width: 30%; + } + /* Layout with mask */ + .rain{ + padding: 10px 12px 12px 10px; + -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset; + -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset; + box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset; + margin: 100px auto; + } + /* Artifical "border" to clear border to bypass mask */ + .border{ + padding: 1px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + } + + .border, + .rain, + .border.start, + .rain.start{ + background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; + background-position: 0 0, 0 0, 0 0, 0 0; + /* Blue-ish Green Fallback for Mozilla */ + background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%); + /* Add "Highlight" Texture to the Animation */ + background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25))); + /* Starting Color */ + background-color: #39f; + /* Just do something for IE-suck */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 ); + } + + /* Non-keyframe fallback animation */ + .border.end, + .rain.end{ + -moz-transition-property: background-position; + -moz-transition-duration: 30s; + -moz-transition-timing-function: linear; + -webkit-transition-property: background-position; + -webkit-transition-duration: 30s; + -webkit-transition-timing-function: linear; + -o-transition-property: background-position; + -o-transition-duration: 30s; + -o-transition-timing-function: linear; + transition-property: background-position; + transition-duration: 30s; + transition-timing-function: linear; + background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0; + } + + /* Keyfram-licious animation */ + @-webkit-keyframes colors { + 0% {background-color: #39f;} + 15% {background-color: #F246C9;} + 30% {background-color: #4453F2;} + 45% {background-color: #44F262;} + 60% {background-color: #F257D4;} + 75% {background-color: #EDF255;} + 90% {background-color: #F20006;} + 100% {background-color: #39f;} + } + .border,.rain{ + -webkit-animation-direction: normal; + -webkit-animation-duration: 20s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-name: colors; + -webkit-animation-timing-function: ease; + } + + /* In-Active State Style */ + .border.unfocus{ + background: #333 !important; + -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2); + -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2); + box-shadow: 0px 0px 15px rgba(255,255,255,.2); + -webkit-animation-name: none; + } + .rain.unfocus{ + background: #000 !important; + -webkit-animation-name: none; + } + + /* Regular Form Styles */ + form{ + background: #212121; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + height: 100%; + width: 335%; + background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909); + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909)); + } + form label{ + display: block; + padding: 10px 10px 5px 15px; + font-size: 20px; + color: #777; + } + form input{ + display: block; + margin: 5px 10px 10px 15px; + width: 85%; + background: #111; + -moz-box-shadow: 0px 0px 4px #000 inset; + -webkit-box-shadow: 0px 0px 4px #000 inset; + box-shadow: 0px 0px 4px #000 inset; + outline: 1px solid #333; + border: 1px solid #000; + padding: 5px; + color: #444; + font-size: 16px; + } + form input:focus{ + outline: 1px solid #555; + color: #FFF; + } + + form textarea{ + display: block; + margin: 5px 10px 10px 15px; + width: 85%; + background: #111; + -moz-box-shadow: 0px 0px 4px #000 inset; + -webkit-box-shadow: 0px 0px 4px #000 inset; + box-shadow: 0px 0px 4px #000 inset; + outline: 1px solid #333; + border: 1px solid #000; + padding: 5px; + color: #444; + font-size: 16px; + } + form textarea:focus{ + outline: 1px solid #555; + color: #FFF; + } + \ No newline at end of file diff --git a/WebContent/reader/03readerNavLeft.html b/WebContent/reader/03readerNavLeft.html index 8f113ff..a7b750c 100644 --- a/WebContent/reader/03readerNavLeft.html +++ b/WebContent/reader/03readerNavLeft.html @@ -21,7 +21,7 @@