more better icon view

build/css/ox.ui.css

@@ -669,28 +669,74 @@ Lists
 }
 
 .OxIconList .OxPage {
-    margin: 4px;
+    padding: 4px;
 }
 
 .OxIconList .OxItem {
     float: left;
+    margin: 4px;
+    opacity: 0.9;
+}
+.OxIconList .OxItem.OxHover,
+.OxIconList .OxItem.OxSelected {
+    opacity: 1;
 }
 
 .OxIconList .OxItem > div {
     position: relative;
 }
 
-.OxIconList .OxItem > .OxIcon > img {
+.OxIconList .OxItem > .OxIcon img {
     position: absolute;
     left: 0;
     right: 0;
+    bottom: 0;
+    margin: auto;
+    border: 2px solid rgba(0, 0, 0, 0);
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+}
+.OxIconList .OxItem > .OxReflection {
+    overflow: hidden;
+}
+
+.OxIconList .OxItem > .OxReflection > div {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
     margin: auto;
 }
 
+.OxIconList .OxItem > .OxReflection > img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    margin: auto;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-transform: scaleY(-1);
+    -webkit-transform: scaleY(-1);
+}
+
+.OxIconList .OxItem > .OxText {
+    text-align: center;
+}
 .OxIconList .OxItem > .OxText > div {
+    display: inline-block;
     font-size: 9px;
     font-weight: bold;
     text-align: center;
+    padding: 1px 2px;
+    border: 2px solid rgba(0, 0, 0, 0);
+    max-width: 120px;
+    word-wrap: break-word;
+    cursor: pointer;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    //-moz-user-select: text;
+    //-webkit-user-select: text;
 }
 
 .OxTextList .OxCell {
@@ -777,7 +823,6 @@ Lists
     width: 10px;
     height: 16px;
     border-width: 0 1px 0 1px;
-    border-color: rgb(32, 32, 32);
     background: rgba(0, 0, 0, 0);
     font-size: 11px;
     text-align: center;