js_osd: messages added

Author: hpingel

Diff for: examples/js_osd/osd.css

@@ -34,7 +34,8 @@ div#osd_container
 div#header
 {
   background-color:#222266;
-  font-size: 2em;
+  font-size: 1.4em;
+  font-weight: bold;
   color:#CDCDCD;
   white-space: pre;
   overflow: hidden;
@@ -49,7 +50,7 @@ div#header
 
 div#content
 {
-  height: 70%;
+  height: 50%;
   padding: 1%;
   margin: 0px;
   overflow: auto;
@@ -76,7 +77,7 @@ div#content ul li.item
   padding: 0% 1% 0% 1%;
   margin: 0% 4% 0.5% 4%;
   font-weight:bold;
-  font-size: 1.5em;
+  font-size: 1em;
   white-space: nowrap;
 }
 
@@ -99,19 +100,19 @@ div#content ul li#selectedItem
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */}
 
-div#content ul li.item:hover
+/*div#content ul li.item:hover
 {
   border-radius:25px;
   border-radius:25px;
-  background: rgb(246,248,249); /* Old browsers */
-  background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera11.10+ */
-  background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
-  background: linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
-}
+  background: rgb(246,248,249);
+  background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1)));
+  background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
+  background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
+  background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
+  background: linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%);
+}*/
 
 #content2
 {
@@ -158,7 +159,18 @@ div#color_buttons{
   border-bottom-right-radius:25px;
 }
 
+div#message
+{
+  font-size: 0.8em;
+  color:#CDCDCD;
+  white-space: pre;
+  overflow: hidden;
+  padding: 2%;
+}
+
+
 div#header,
+div#message,
 div#color_buttons
 {
   background: rgb(76,76,76); /* Old browsers */
@@ -253,5 +265,5 @@ div#color_buttons br.clear{
 }
 
 div.invisible{
-  display: none;
+  visibility: hidden;
 }