Keep cleaning and refactoring styles and samples.

wise-editor/src/main/webapp/css/toolbar.less

@@ -1,5 +1,3 @@
-@import "skin.less";
-
 div#toolbar {
     width: 100%;
     height: @header-toolbar-height;
@@ -100,101 +98,52 @@ div#exportAnchor {
     left: 0;
 }
 
-/*div#saveButton {*/
-/*background: url(../images/save.png) no-repeat center top;*/
-/*}*/
+/***************************************************************************************************/
+/* Other toolbar styles */
+/***************************************************************************************************/
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+}
 
-/*div#undoEdition {*/
-/*background: url(../images/undo.png) no-repeat center top;*/
-/*}*/
+div#colorPalette {
+    border: 1px solid #bbb4d6;
+    display: none;
+    position: absolute;
+    z-index: 4;
+    width: 160px;
+    top: 89px;
+}
 
-/*div#redoEdition {*/
-/*background: url(../images/redo.png) no-repeat center top;*/
-/*}*/
+div.toolbarPanelLink, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    color: black;
+    margin: 1px;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 10px;
+    font-weight: bold;
+}
 
-/*div#export {*/
-/*background: url(../images/export.png) no-repeat center top;*/
-/*}*/
+div.toolbarPanelLink:hover, div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    background-color: #efefef;
+}
 
-/*div#zoomIn {*/
-/*background: url(../images/zoom-in.png) no-repeat center top;*/
-/*}*/
-
-/*div#zoomOut {*/
-/*background: url(../images/zoom-out.png) no-repeat center top;*/
-/*}*/
-
-/*div#addTopic {*/
-/*background: url(../images/topic-add.png) no-repeat center top;*/
-/*}*/
-
-/*div#deleteTopic {*/
-/*background: url(../images/topic-delete.png) no-repeat center top;*/
-/*}*/
-
-/*div#topicColor {*/
-/*background: url(../images/topic-color.png) no-repeat center top;*/
-/*}*/
-
-/*div#topicIcon {*/
-/*background: url(../images/topic-icon.png) no-repeat center top;*/
-/*}*/
-
-/*div#topicNote {*/
-/*background: url(../images/note.png) no-repeat center top;*/
-/*}*/
-
-/*div#topicNote {*/
-/*background: url(../images/topic-icon.png) no-repeat center top;*/
-/*z-index: 4;*/
-/*}*/
-
-/*div#topicLink {*/
-/*background: url(../images/topic-link.png) no-repeat center top;*/
-/*z-index: 4;*/
-/*}*/
-
-/*div#topicNote {*/
-/*background-image: url(../images/note.png);*/
-/*z-index: 4;*/
-/*}*/
-
-/*div#topicBorder {*/
-/*background: url(../images/topic-border.png) no-repeat center top;*/
-/*}*/
-
-/*div#fontFamily {*/
-/*background: url(../images/font-type.png) no-repeat center top;*/
-/*}*/
-
-/*div#topicShape {*/
-/*background: url(../images/topic-shape.png) no-repeat center top;*/
-/*}*/
-
-/*div#fontBold {*/
-/*background: url(../images/font-bold.png) no-repeat center top;*/
-/*}*/
-
-/*div#fontItalic {*/
-/*background: url(../images/font-italic.png) no-repeat center top;*/
-/*}*/
-
-/*div#fontColor {*/
-/*background: url(../images/font-color.png) no-repeat center top;*/
-/*}*/
-
-/*div#fontSize {*/
-/*background: url(../images/font-size.png) no-repeat center top;*/
-/*}*/
-
-/*div#shareIt {*/
-/*background: url(../images/share.png) no-repeat center top;*/
-/*}*/
-
-/*div#publishIt {*/
-/*background: url(../images/publish.png) no-repeat center top;*/
-/*}*/
-
-/*div#tagIt {*/
-/*background: url(../images/tag.png) no-repeat center top;*/
-/*}*/
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 11px;
+    -moz-border-radius: 60px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}