changing tag design to full css style

4 files changed, 58 insertions, 50 deletions

diff --git a/askbot/skins/default/media/style/lib_style.less b/askbot/skins/default/media/style/lib_style.less
index 4f2bad79..941c83ff 100644
--- a/askbot/skins/default/media/style/lib_style.less
+++ b/askbot/skins/default/media/style/lib_style.less
@@ -26,7 +26,7 @@
 /* CSS3 Elements */
 
 .box-shadow (@hor: 0px, @vert: 0px, @blur: 5px, @shadow: #929292){
-    -webkit-box-shadow: @arguments;
+    -webkit-box-shadow: @arguments ;
     -moz-box-shadow: @arguments;
     box-shadow: @arguments;
 }
@@ -53,3 +53,13 @@
     -webkit-border-top-left-radius:@radio;
     -webkit-border-top-right-radius:@radio;
 }
+
+.rounded-corners-right(@radio:5px){
+    border-top-right-radius:@radio;
+    border-bottom-right-radius:@radio;
+    -moz-border-radius-topright:@radio;
+    -moz-border-radius-bottomright:@radio;
+    -webkit-border-bottom-right-radius:@radio;
+    -webkit-border-top-right-radius:@radio;
+}
+
diff --git a/askbot/skins/default/media/style/style.css b/askbot/skins/default/media/style/style.css
index 3a38a9cb..28656b08 100644
--- a/askbot/skins/default/media/style/style.css
+++ b/askbot/skins/default/media/style/style.css
@@ -85,7 +85,7 @@ body.anon #searchBar .searchInputCancelable{width:405px;}
 .box li{list-style-type:disc;font-size:13px;line-height:20px;margin-bottom:10px;color:#707070;}
 .box ul.tags{list-style:none;margin:0;padding:0;line-height:170%;display:block;}
 .box #displayTagFilterControl p label{color:#707070;font-size:15px;}
-.box .inputs #interestingTagInput,.box .inputs #ignoredTagInput{width:158px;border:#c9c9b5 1px solid;height:25px;}
+.box .inputs #interestingTagInput,.box .inputs #ignoredTagInput{width:153px;padding-left:5px;border:#c9c9b5 1px solid;height:25px;}
 .box .inputs #interestingTagAdd,.box .inputs #ignoredTagAdd{background:url(../images/small-button-blue.png) repeat-x top;border:0;color:#4a757f;font-weight:bold;font-size:12px;width:30px;height:27px;margin-top:-2px;cursor:pointer;border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;text-shadow:0px 1px 0px #e6f6fa;-moz-text-shadow:0px 1px 0px #e6f6fa;-webkit-text-shadow:0px 1px 0px #e6f6fa;-webkit-box-shadow:1px 1px 2px #808080;-moz-box-shadow:1px 1px 2px #808080;box-shadow:1px 1px 2px #808080;}
 .box .inputs #interestingTagAdd:hover,.box .inputs #ignoredTagAdd:hover{background:url(../images/small-button-blue.png) repeat-x bottom;}
 .box img.gravatar{margin:1px;}
@@ -121,7 +121,7 @@ body.anon #searchBar .searchInputCancelable{width:405px;}
 ul#searchTags{margin-left:10px;float:right;padding-top:2px;}
 .search-tips{font-size:16px;line-height:17px;color:#707070;margin:5px 0 10px 0;padding:0px;float:left;font-family:'Yanone Kaffeesatz',sans-serif;}.search-tips a{text-decoration:underline;color:#1b79bd;}
 #question-list{float:left;position:relative;background-color:#FFF;padding:0;width:100%;}
-.short-summary{position:relative;filter:inherit;padding:10px;border-bottom:1px solid #DDDBCE;margin-bottom:1px;overflow:hidden;width:710px;float:left;background:url(../images/summary-background.png) repeat-x;}.short-summary h2{font-size:24px;font-weight:normal;line-height:26px;padding-left:0;margin-bottom:8px;display:block;font-family:'Yanone Kaffeesatz',sans-serif;}
+.short-summary{position:relative;filter:inherit;padding:10px;border-bottom:1px solid #DDDBCE;margin-bottom:1px;overflow:hidden;width:710px;float:left;background:url(../images/summary-background.png) repeat-x;}.short-summary h2{font-size:24px;font-weight:normal;line-height:26px;padding-left:0;margin-bottom:6px;display:block;font-family:'Yanone Kaffeesatz',sans-serif;}
 .short-summary a{color:#464646;}
 .short-summary .userinfo{text-align:right;line-height:16px;font-family:Arial;padding-right:4px;}
 .short-summary .userinfo .relativetime,.short-summary span.anonymous{font-size:11px;clear:both;font-weight:normal;color:#555;}
@@ -168,24 +168,21 @@ ul#searchTags{margin-left:10px;float:right;padding-top:2px;}
 .tag-size-9{font-size:20px;}
 .tag-size-10{font-size:21px;}
 ul.tags,ul.tags.marked-tags,ul#related-tags{list-style:none;margin:0;padding:0;line-height:170%;display:block;}
-ul.tags li{float:left;display:block;margin:0 5px 0 0;padding:0;height:20px;}
+ul.tags li{float:left;display:block;margin:0 8px 0 0;padding:0;height:20px;}
 .wildcard-tags{clear:both;}
 ul.tags.marked-tags li,.wildcard-tags ul.tags li{margin-bottom:5px;}
 #tagSelector div.inputs{clear:both;float:none;margin-bottom:10px;}
 .tags-page ul.tags li,ul#ab-user-tags li{width:160px;margin:5px;}
-ul#related-tags li{margin:0 5px 5px 0;float:left;clear:left;}
-.tag-left{background:url(../images/tag-right.png) no-repeat right center;border:none;cursor:pointer;display:block;float:left;height:20px;margin:0 5px 0 0;padding:0;}
-.tag-right{background:url(../images/tag-left.png) no-repeat left center;border:none;display:block;float:left;height:20px;line-height:20px;font-weight:normal;font-size:11px;padding:0px 10px 0px 15px;text-decoration:none;text-align:center;white-space:nowrap;vertical-align:middle;font-family:Arial;color:#717179;}
-.deletable-tag{margin-right:3px;white-space:nowrap;}
-.deletable-tag .tag-right{padding-right:0px;float:left;}
-.deletable-tag.tag-left{padding-right:0px;}
+ul#related-tags li{margin:0 5px 8px 0;float:left;clear:left;}
+.tag-left{cursor:pointer;display:block;float:left;height:17px;margin:0 5px 0 0;padding:0;-webkit-box-shadow:0px 0px 5px #d3d6d7;-moz-box-shadow:0px 0px 5px #d3d6d7;box-shadow:0px 0px 5px #d3d6d7;}
+.tag-right{background:#f3f6f6;border:#fff 1px solid ;border-top:#fff 2px solid;outline:#cfdbdb 1px solid;display:block;float:left;height:17px;line-height:17px;font-weight:normal;font-size:11px;padding:0px 8px 0px 8px;text-decoration:none;text-align:center;white-space:nowrap;vertical-align:middle;font-family:Arial;color:#717179;}
+.deletable-tag{margin-right:3px;white-space:nowrap;border-top-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;-webkit-border-top-right-radius:4px;}
 .tags a.tag-right,.tags span.tag-right{color:#585858;text-decoration:none;}
 .tags a:hover{color:#1A1A1A;}
 .users-page h1,.tags-page h1{float:left;}
 .main-page h1{margin-right:5px;}
-span.delete-icon{padding-left:13px;vertical-align:bottom;background:url(../images/close-small-dark.png) bottom no-repeat;cursor:default;}
-span.delete-icon:hover{background:url(../images/close-small-dark.png) top no-repeat;}
-.tags span.delete-icon{float:left;height:20px;width:8px;margin:0px 0 0 10px;display:block;}
+.delete-icon{margin-top:-1px;float:left;height:21px;width:18px;display:block;line-height:20px;text-align:center;background:#bbcdcd;cursor:default;color:#fff;border-top:#cfdbdb 1px solid;font-family:Arial;border-top-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;-webkit-border-top-right-radius:4px;text-shadow:0px 1px 0px #7ea0a0;-moz-text-shadow:0px 1px 0px #7ea0a0;-webkit-text-shadow:0px 1px 0px #7ea0a0;}
+.delete-icon:hover{background:#b32f2f;}
 .tag-number{font-weight:normal;float:left;font-size:16px;color:#5d5d5d;}
 .badges .tag-number{float:none;display:inline;padding-right:15px;}
 .section-title{color:#7ea9b3;font-family:'Yanone Kaffeesatz',sans-serif;font-weight:bold;font-size:24px;}
@@ -469,7 +466,7 @@ ul.form-horizontal-rows label{position:absolute;left:0px;bottom:6px;margin:0px;l
 ul.form-horizontal-rows li input{position:absolute;bottom:0px;left:180px;margin:0px;}
 .narrow .summary{float:left;}
 .user-profile-tool-links{font-weight:bold;vertical-align:top;}
-ul.post-tags{margin-left:7px;}
+ul.post-tags{margin-left:3px;}
 ul.post-tags li{margin-top:4px;margin-bottom:3px;}
 ul.post-retag{margin-bottom:0px;margin-left:5px;}
 #question-controls .tags{margin:0 0 3px 0;}
diff --git a/askbot/skins/default/media/style/style.less b/askbot/skins/default/media/style/style.less
index 6c21e6d3..a19c9f97 100644
--- a/askbot/skins/default/media/style/style.less
+++ b/askbot/skins/default/media/style/style.less
@@ -584,7 +584,8 @@ body.anon {
 
     .inputs{
         #interestingTagInput, #ignoredTagInput{
-            width:158px;
+            width:153px;
+            padding-left:5px;
             border:#c9c9b5 1px solid;
             height:25px;
         }
@@ -878,7 +879,7 @@ ul#searchTags {
         font-weight:normal;
         line-height: 26px;
         padding-left: 0;
-        margin-bottom:8px;
+        margin-bottom:6px;
         display:block;
         font-family:@main-font;
     }
@@ -1132,7 +1133,7 @@ ul#related-tags {
 ul.tags li {
     float:left;
     display: block;
-    margin: 0 5px 0 0;
+    margin: 0 8px 0 0;
     padding: 0;
     height:20px;
 }
@@ -1159,7 +1160,7 @@ ul#ab-user-tags li {
 }
 
 ul#related-tags li {
-    margin: 0 5px 5px 0;
+    margin: 0 5px 8px 0;
     float: left;
     clear: left;
 }
@@ -1167,26 +1168,28 @@ ul#related-tags li {
 /* .tag-left and .tag-right are for the sliding doors decoration of tags */
 
 .tag-left {
-    background: url(../images/tag-right.png) no-repeat right center;
-    border: none;
     cursor: pointer;
     display: block;
     float: left;
-    height: 20px;
+    height: 17px;
     margin: 0 5px 0 0;
     padding: 0;
+    .box-shadow(0px,0px,5px,#d3d6d7);
 }
 
 .tag-right {
-    background:url(../images/tag-left.png) no-repeat left center;
-    border: none;
+    background: #f3f6f6;
+    border:#fff 1px solid ;
+    border-top:#fff 2px solid;
+    outline:#cfdbdb 1px solid;
+   /* .box-shadow(0px,1px,0px,#88a8a8);*/
     display: block;
     float: left;
-    height: 20px;
-    line-height: 20px;
+    height: 17px;
+    line-height: 17px;
     font-weight: normal;
     font-size: 11px;
-    padding: 0px 10px 0px 15px;
+    padding: 0px 8px 0px 8px;
     text-decoration: none;
     text-align: center;
     white-space: nowrap;
@@ -1197,14 +1200,7 @@ ul#related-tags li {
 .deletable-tag {
     margin-right: 3px;
     white-space: nowrap;
-}
-
-.deletable-tag .tag-right {
-    padding-right: 0px;
-    float: left;
-}
-.deletable-tag.tag-left {
-    padding-right: 0px;
+    .rounded-corners-right(4px);
 }
 
 .tags a.tag-right,
@@ -1225,23 +1221,28 @@ ul#related-tags li {
     margin-right: 5px;
 }
 
-span.delete-icon {
-    padding-left: 13px;
-    vertical-align: bottom;
-    background: url(../images/close-small-dark.png) bottom no-repeat;
+.delete-icon {
+    margin-top:-1px;
+    float: left;
+    height: 21px;
+    width:18px;
+    display: block;
+    line-height:20px;
+    text-align:center;
+    background: #bbcdcd;
     cursor: default;
+    color:#fff;
+    border-top:#cfdbdb 1px solid;
+    font-family:@body-font;
+    .rounded-corners-right(4px);
+    .text-shadow(0px,1px,0px,#7ea0a0)
+
 }
-span.delete-icon:hover {
-    background: url(../images/close-small-dark.png) top no-repeat;
+.delete-icon:hover {
+    background: #b32f2f;
 }
 
-.tags span.delete-icon {
-    float: left;
-    height: 20px;
-    width:8px;
-    margin: 0px 0 0 10px;
-    display: block;
-}
+
 
 .tag-number {
     font-weight: normal;
@@ -3142,7 +3143,7 @@ ul.form-horizontal-rows li input {
 
 
 ul.post-tags {
-    margin-left: 7px;
+    margin-left: 3px;
 }
 ul.post-tags li {
     margin-top: 4px;
diff --git a/askbot/skins/default/templates/macros.html b/askbot/skins/default/templates/macros.html
index 582980f4..27dddfb9 100644
--- a/askbot/skins/default/templates/macros.html
+++ b/askbot/skins/default/templates/macros.html
@@ -223,11 +223,11 @@ poor design of the data or methods on data objects #}
             rel="tag"
         >{{ tag|replace('*', '&#10045;')|truncate(20,True)}}</{% if not is_link or tag[-1] == '*' %}span{% else %}a{% endif %}>
         {% if deletable %}
-            <span class="delete-icon"
+            <div class="delete-icon"
                 {% if delete_link_title %}
                     title="{{ delete_link_title }}"
                 {% endif %}
-            ></span>
+            >x</div>
         {% endif %}
     </{{ html_tag }}>
     {{ extra_content }}