[icons] replaced some image icons with font icons

* replaced all the image icons that's can be replaced * added 'seafile-font'(offered only 'sf-icon-share' so far) * make other browsers that doesn't support ':before' such as IE 7 can show the icons too
2025-09-18 00:00:00 +00:00 · 2013-04-13 17:30:42 +08:00
parent 002d22eab2
commit 503f1d1e92
23 changed files with 132 additions and 132 deletions
--- a/group/templates/group/group_info.html
+++ b/group/templates/group/group_info.html
@@ -99,9 +99,9 @@
        </td>
        <td>{{ repo.owner|email2nickname }}</td>
        <td>
-            <img src="{{ MEDIA_URL }}img/download-20.png" class="download op-icon vh" data="{{ SITE_ROOT }}seafile_access_check/?repo_id={{ repo.props.id }}" alt="{% trans "Download" %}" title="{% trans "Download" %}" />
+            <span class="icon-cloud-download download op-icon vh" data="{{ SITE_ROOT }}seafile_access_check/?repo_id={{ repo.props.id }}" title="{% trans "Download and Sync" %}"></span>
        {% if is_staff or repo.share_from_me  %}
-        <img src="{{ MEDIA_URL }}img/delete-20.png" class="cancel-share op-icon vh" data-url="{% url 'repo_remove_share' %}?repo_id={{ repo.props.id }}&from={{ repo.owner }}&gid={{ group.id }}" data-target="{{ repo.props.name }}" title="{% trans "Unshare" %}" alt="{% trans "Unshare" %}" />
+        <span class="icon-trash cancel-share op-icon vh" data-url="{% url 'repo_remove_share' %}?repo_id={{ repo.props.id }}&from={{ repo.owner }}&gid={{ group.id }}" data-target="{{ repo.props.name }}" title="{% trans "Unshare" %}"></span>
        {% endif %}
        </td>
    </tr>
@@ -129,15 +129,15 @@

    {% for cmt in recent_commits %}
    <tr>
-        <td class="icon-container">
+        <td>
            {% if cmt.tp == 'Added' or cmt.tp == 'Deleted' or cmt.tp == 'Removed' %}
                {% if cmt.tp == 'Added' %}
-                <img src="{{MEDIA_URL}}img/plus-16.png" alt="" />
+                <span class="icon-plus"></span>
                {% else %}
-                <img src="{{MEDIA_URL}}img/minus-16.png" alt="" />
+                <span class="icon-minus"></span>
                {% endif %}
            {% else %}
-            <img src="{{MEDIA_URL}}img/modify-16.png" alt="" />
+                <span class="icon-pencil"></span>
            {% endif %}
        </td>
        <td><a href="{{ SITE_ROOT }}repo/{{ cmt.repo.props.id }}/">{{ cmt.repo.props.name }}</a></td>
@@ -183,11 +183,7 @@
 {% endblock %}

 {% block extra_script %}
-
 <script type="text/javascript">
-if ($.browser.msie && $.browser.version < 8) {
-    $('.icon-eye-open').html('&#xf06e;');
-}
 addConfirmTo($('#quit-group'), {
        'title':'{% trans "Quit Group" %}',
        'con':'{% trans "Are you sure you want to quit this group?" %}'
@@ -196,17 +192,14 @@ addConfirmTo($('.cancel-share'), {
        'title':'{% trans "Unshare Library" %}',
        'con':'{% trans "Are you sure you want to unshare %s ?" %}'
 });
-
-
 $("table tr:gt(0)").hover(
    function() {
-        $(this).find('.op-icon').css('cursor', 'pointer').removeClass('vh');
+        $(this).find('.op-icon').removeClass('vh');
    },
    function() {
        $(this).find('.op-icon').addClass('vh');
    }
 );
-
 $('.download').click(function() {
    window.open($(this).attr('data'));
 });
--- a/group/templates/group/group_info_for_pub.html
+++ b/group/templates/group/group_info_for_pub.html
@@ -76,25 +76,4 @@
  <p>{% blocktrans %}A library can be made public in its settings page.(Not implemented yet){% endblocktrans %}</p>
 </div>
 {% endif %}
-
-
-{% endblock %}
-
-{% block extra_script %}
-
-<script type="text/javascript">
-if ($.browser.msie && $.browser.version < 8) {
-    $('.icon-eye-open').html('&#xf06e;');
-}
-
-$("table tr:gt(0)").hover(
-    function() {
-        $(this).find('.op-icon').css('cursor', 'pointer').removeClass('vh');
-    },
-    function() {
-        $(this).find('.op-icon').addClass('vh');
-    }
-);
-
-</script>
 {% endblock %}
--- a/media/css/font-awesome.css
+++ b/media/css/font-awesome.css
@@ -21,34 +21,8 @@
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
-}
-/* more sprites.less reset */
-[class^="icon-"]:before,
-[class*=" icon-"]:before {
-  text-decoration: inherit;
-  display: inline-block;
  speak: none;
 }
-.icon-large:before {
-  vertical-align: -10%;
-  font-size: 1.3333333333333333em;
-}
-.btn [class^="icon-"].icon-large,
-.nav [class^="icon-"].icon-large,
-.btn [class*=" icon-"].icon-large,
-.nav [class*=" icon-"].icon-large {
-  line-height: .9em;
-}
-.nav-tabs [class^="icon-"],
-.nav-pills [class^="icon-"],
-.nav-tabs [class*=" icon-"],
-.nav-pills [class*=" icon-"],
-.nav-tabs [class^="icon-"].icon-large,
-.nav-pills [class^="icon-"].icon-large,
-.nav-tabs [class*=" icon-"].icon-large,
-.nav-pills [class*=" icon-"].icon-large {
-  line-height: .9em;
-}
 li [class^="icon-"],
 .nav li [class^="icon-"],
 li [class*=" icon-"],
@@ -109,40 +83,6 @@ li [class*=" icon-"].icon-large,
 [class*=" icon-"].fright {
  margin-left: .3em;
 }
-.btn [class^="icon-"].fleft.icon-2x,
-.btn [class*=" icon-"].fleft.icon-2x,
-.btn [class^="icon-"].fright.icon-2x,
-.btn [class*=" icon-"].fright.icon-2x {
-  margin-top: .18em;
-}
-.btn [class^="icon-"].icon-spin.icon-large,
-.btn [class*=" icon-"].icon-spin.icon-large {
-  line-height: .8em;
-}
-.btn.btn-small [class^="icon-"].fleft.icon-2x,
-.btn.btn-small [class*=" icon-"].fleft.icon-2x,
-.btn.btn-small [class^="icon-"].fright.icon-2x,
-.btn.btn-small [class*=" icon-"].fright.icon-2x {
-  margin-top: .25em;
-}
-.btn.btn-large [class^="icon-"],
-.btn.btn-large [class*=" icon-"] {
-  margin-top: 0;
-}
-.btn.btn-large [class^="icon-"].fleft.icon-2x,
-.btn.btn-large [class*=" icon-"].fleft.icon-2x,
-.btn.btn-large [class^="icon-"].fright.icon-2x,
-.btn.btn-large [class*=" icon-"].fright.icon-2x {
-  margin-top: .05em;
-}
-.btn.btn-large [class^="icon-"].fleft.icon-2x,
-.btn.btn-large [class*=" icon-"].fleft.icon-2x {
-  margin-right: .2em;
-}
-.btn.btn-large [class^="icon-"].fright.icon-2x,
-.btn.btn-large [class*=" icon-"].fright.icon-2x {
-  margin-left: .2em;
-}
 /*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .icon-glass:before                { content: "\f000"; }
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1,6 +1,22 @@
-html {
-    background:#fff;
+@font-face {
+    font-family: 'seafile-font';
+    src:url('sf_font/seafile-font.eot');
+    src:url('sf_font/seafile-font.eot?#iefix') format('embedded-opentype'),
+        url('sf_font/seafile-font.woff') format('woff'),
+        url('sf_font/seafile-font.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }
+[class^="sf-icon-"] {
+    font-family: 'seafile-font';
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+}
+.sf-icon-share:before { content:"\e001"; }
+html { background:#fff; }
 body,
 h1,h2,h3,h4,h5,h6,
 ul,ol,li,dl,dt,dd,
@@ -162,6 +178,21 @@ p {
    color:#808080;
    font-size:12px;
 }
+.icon-plus, .icon-minus, .icon-pencil,
+.icon-star-empty, .icon-star {
+    font-size:16px;
+    line-height:1;
+}
+.icon-plus, .icon-minus, .icon-pencil {
+    color:#444;
+    margin-left:3px;
+}
+.icon-star-empty {
+    color:#d0d0d0;
+}
+.icon-star {
+    color:#505050;
+}
 .op,
 .more {
    font-weight:normal;
@@ -175,6 +206,13 @@ p {
    color:#803;
    word-wrap:break-word;
 }
+.op-icon {
+    font-size:20px;
+    line-height:1;
+    color:#888;
+    cursor:pointer;
+    margin-right:3px;
+}
 .big-more-btn {
    padding:.5em 0;
    color:#777;
@@ -205,7 +243,6 @@ input.btn-disabled:hover {/*for input*/
 .modalCloseImg,
 .add,
 .repo-op .op-btn,
-.repo-top-op-btn,
 #star {
    background:transparent url('../img/bg.png') no-repeat scroll 0 0;
 }
@@ -1178,6 +1215,8 @@ textarea:-moz-placeholder {/* for FF */
 }
 .file-star {
    cursor:pointer;
+    line-height:19px;
+    margin-left:5px;
 }
 .repo-file-list .repo-file-op {
    position:relative;
@@ -1231,16 +1270,10 @@ textarea:-moz-placeholder {/* for FF */
 }
 .repo-top-op-btn {
    font-size:14px;
-    padding-left:21px;
 }
-#repo-download-btn {
-    background-position:3px -79px;
-}
-#recycle-btn {
-    background-position:3px -29px;
-}
-#repo-setting-btn {
-    background-position:3px -53px;
+.repo-top-op-btn [class^="icon-"] {
+    color:#444;
+    margin-right:2px;
 }
 #repo-latest-commit {
    word-wrap:break-word;
@@ -2135,8 +2168,11 @@ textarea:-moz-placeholder {/* for FF */
 }
 .search-form .search-submit {
    width:30px;
-    padding:0;
-    background:#fff url('../img/search.png') no-repeat scroll 50% 50%;
+    background:#fff;
+}
+.search-form .icon-search {
+    font-size:16px;
+    color:#aaa;
 }
 #search-form {
    width:426px;
--- a/media/css/sf_font/seafile-font.eot
+++ b/media/css/sf_font/seafile-font.eot
--- a/media/css/sf_font/seafile-font.ttf
+++ b/media/css/sf_font/seafile-font.ttf
--- a/media/css/sf_font/seafile-font.woff
+++ b/media/css/sf_font/seafile-font.woff
--- a/media/img/delete-20.png
+++ b/media/img/delete-20.png
--- a/media/img/download-20.png
+++ b/media/img/download-20.png
--- a/media/img/gray-star-icon.png
+++ b/media/img/gray-star-icon.png
--- a/media/img/gray-unstar-icon.png
+++ b/media/img/gray-unstar-icon.png
--- a/media/img/minus-16.png
+++ b/media/img/minus-16.png
--- a/media/img/modify-16.png
+++ b/media/img/modify-16.png
--- a/media/img/plus-16.png
+++ b/media/img/plus-16.png
--- a/media/img/search.png
+++ b/media/img/search.png
--- a/media/img/share-20.png
+++ b/media/img/share-20.png
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,8 +8,8 @@
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/ui-lightness/jquery-ui-1.8.16.custom.css" />
-<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub.css?t=1364382180" />
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/font-awesome.css" />
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub.css?t=1364382180" />
 <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.ico?t=1364382180" />
 <!--[if IE]>
 <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.ico?t=1364382180"/>
@@ -70,7 +70,7 @@
                {% if enable_file_search and request.user.is_authenticated %}
                <form id="top-search-form" method="get" action="{% url 'search' %}" class="search-form fright">
                    <input class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
-                    <input type="submit" value="" class="search-submit" />
+                    <button type="submit" class="search-submit"><span class="icon-search"></span></button>
                </form>
                {% endif %}
            </div>
@@ -166,5 +166,61 @@ $('#info-bar .close').click(function() {
 {% endif %}
 </script>
 {% block extra_script %}{% endblock %}
+<script type="text/javascript">
+//font icons: for browsers that don't support ':before'
+    var sf_icons = [{'name':'share', 'con':'e001'}];
+    var fa_icons = [ 
+        {'name':'trash', 'con':'f014'},
+        {'name':'cog', 'con':'f013'},
+        {'name':'cloud-download', 'con':'f0ed'},
+        {'name':'search', 'con':'f002'},
+        {'name':'minus', 'con':'f068'},
+        {'name':'plus', 'con':'f067'},
+        {'name':'pencil', 'con':'f040'},
+        {'name':'eye-open', 'con':'f06e'},
+        {'name':'comment-alt', 'con':'f0e5'},
+        {'name':'double-angle-right', 'con':'f101'},
+        {'name':'font', 'con':'f031'},
+        {'name':'text-height', 'con':'f034'},
+        {'name':'tint', 'con':'f043'},
+        {'name':'bold', 'con':'f032'},
+        {'name':'italic', 'con':'f033'},
+        {'name':'strikethrough', 'con':'f0cc'},
+        {'name':'underline', 'con':'f0cd'},
+        {'name':'list-ul', 'con':'f0ca'},
+        {'name':'list-ol', 'con':'f0cb'},
+        {'name':'indent-left', 'con':'f03b'},
+        {'name':'indent-right', 'con':'f03c'},
+        {'name':'align-left', 'con':'f036'},
+        {'name':'align-center', 'con':'f037'},
+        {'name':'align-right', 'con':'f038'},
+        {'name':'align-justify', 'con':'f039'},
+        {'name':'link', 'con':'f0c1'},
+        {'name':'cut', 'con':'f0c4'},
+        {'name':'picture', 'con':'f03e'},
+        {'name':'undo', 'con':'f0e2'},
+        {'name':'repeat', 'con':'f01e'},
+        {'name':'star', 'con':'f005'},
+        {'name':'star-empty', 'con':'f006'}
+    ];  
+    function setCon(icon, icon_class_prefix, icon_list) {
+            for (var i = 0, len = icon_list.length; i < len; i++) {
+                if (icon.hasClass(icon_class_prefix + icon_list[i].name)) {
+                    icon.html('&#x' + icon_list[i].con + ';');
+                    break;
+                }
+            }
+    }
+    var pseudo_test = $('body').append('<span class="sf-icon-share pseudo-test" style="color:#fff;position:fixed;left:0;bottom:0;"></span>').children('.pseudo-test');
+    if (pseudo_test.width() == 0) {
+        $('[class^="sf-icon-"]').each(function() {
+            setCon($(this), 'sf-icon-', sf_icons);
+        }); 
+        $('[class^="icon-"], [class$=" icon-"]').each(function() {
+            setCon($(this), 'icon-', fa_icons);
+        }); 
+    }
+    pseudo_test.remove();
+</script>
 </body>
 </html>
--- a/templates/pubrepo.html
+++ b/templates/pubrepo.html
@@ -41,7 +41,7 @@
        <td>{% if repo.props.last_modified %}{{ repo.props.last_modified|translate_seahub_time }}{% else %}--{% endif %}</td>
        <td>{{ repo.props.user|email2nickname }}</td>
        <td>
-            <img src="{{ MEDIA_URL }}img/download-20.png" data="{{ repo.props.repo_id }}" class="download-btn op-icon vh" title="{% trans "Download"%}" alt="{% trans "Download"%}" />
+            <span data="{{ repo.props.repo_id }}" class="icon-cloud-download download-btn op-icon vh" title="{% trans "Download and Sync"%}"></span>
        </td>
    </tr>
    {% endfor %}
@@ -63,7 +63,7 @@

    $("table tr:gt(0)").hover(
        function() {
-            $(this).find('.op-icon').css('cursor', 'pointer').removeClass('vh');
+            $(this).find('.op-icon').removeClass('vh');
        },  
        function() {
            $(this).find('.op-icon').addClass('vh');
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -21,13 +21,13 @@
        <div class="fright">
            {% if path == '/' %}
                {% if user_perm %}
-                  <button id="repo-download-btn" class="repo-top-op-btn">{% trans "Download"%}</button>
+                <button id="repo-download-btn" class="repo-top-op-btn"><span class="icon-cloud-download"></span>{% trans "Download"%}</button>
                {% endif %}
                {% if is_repo_owner %}
-                  <button id="repo-setting-btn" class="repo-top-op-btn">{% trans "Settings" %}</button>
+                <button id="repo-setting-btn" class="repo-top-op-btn"><span class="icon-cog"></span>{% trans "Settings" %}</button>
                {% endif %}
                {% if user_perm == 'rw' %}
-                  <button id="recycle-btn" data="{% url 'repo_recycle_view' repo.id %}" class="repo-top-op-btn">{% trans "Trash"%}</button>
+                <button id="recycle-btn" data="{% url 'repo_recycle_view' repo.id %}" class="repo-top-op-btn"><span class="icon-trash"></span>{% trans "Trash"%}</button>
                {% endif %}
            {% else %}
                <input id="shared-link" class="hide" type="text" readonly="readonly" value="{{ dir_shared_link }}" />
@@ -154,11 +154,11 @@

                {% for dirent in file_list %}
                <tr class="file-item" data-name="{{dirent.obj_name}}" data-time="{% if dirent.last_modified %}{{ dirent.last_modified }} {%else %}0{% endif %}">
-                    <td class="icon-container">
+                    <td>
                        {% if dirent.starred %}
-                        <img src="{{ MEDIA_URL }}img/gray-star-icon.png" alt="{% trans 'starred' %}" title="{% trans 'starred' %}" class="file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="starred" />
+                        <span title="{% trans 'starred' %}" class="icon-star file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="starred"></span>
                        {% else %}
-                        <img src="{{ MEDIA_URL }}img/gray-unstar-icon.png" alt="{% trans 'unstarred' %}" title="{% trans 'unstarred' %}" class="file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="unstarred" />
+                        <span title="{% trans 'unstarred' %}" class="icon-star-empty file-star" data-path="{{ path }}{{dirent.obj_name}}" data-status="unstarred"></span>
                        {% endif %}
                    </td>
                    <td class="icon-container"><img src="{{ MEDIA_URL }}img/file/{{ dirent.obj_name|file_icon_filter }}" alt="{% trans "File"%}" /></td>
@@ -648,9 +648,9 @@ $('.file-star').click(function() {
        success:function(data) {
            if (data['success']) {
                if (state == 'starred') {
-                    it.attr('src', '{{ MEDIA_URL }}img/gray-unstar-icon.png').attr('alt','{% trans 'unstarred' %}').attr('title','{% trans 'unstarred' %}').data('status','unstarred');
+                    it.attr('class', 'file-star icon-star-empty').attr('title','{% trans 'unstarred' %}').data('status','unstarred');
                } else {
-                    it.attr('src', '{{ MEDIA_URL }}img/gray-star-icon.png').attr('alt','{% trans 'starred' %}').attr('title','{% trans 'starred' %}').data('status','starred');
+                    it.attr('class', 'file-star icon-star').attr('title','{% trans 'starred' %}').data('status','starred');
                }
            }
        },
--- a/templates/search_results.html
+++ b/templates/search_results.html
@@ -7,7 +7,7 @@
 <div id="search-form-container">
    <form method="get" action="{% url 'search' %}" class="search-form" id="search-form">
        <input class="search-input" name="q" placeholder="{% trans 'Search Files' %}" value="{{ keyword }}" />
-        <input type="submit" value="" class="search-submit" />
+        <button type="submit" class="search-submit"><span class="icon-search"></span></button>
    </form>
 </div>

--- a/templates/snippets/bottom_bar.html
+++ b/templates/snippets/bottom_bar.html
@@ -4,10 +4,6 @@ var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="discuss"><span
 $('#wrapper').append(Bottom_bar);
 $('#main-panel').css('margin-bottom', $('#bottom-bar').outerHeight() + 2);
 $('#footer').addClass('hide');
-if ($.browser.msie && $.browser.version < 8) {
-    $('.icon-comment-alt').html('&#xf0e5;');
-    $('.icon-double-angle-right').html('&#xf101;');
-}

 {% if groups %}
 function getAndHandleDiscussions(data_html) {
--- a/templates/snippets/my_owned_repos.html
+++ b/templates/snippets/my_owned_repos.html
@@ -30,9 +30,9 @@
        <td>--</td>
        {% endif %}
        <td>
-            <img src="{{ MEDIA_URL }}img/download-20.png" data="{{ repo.props.id }}" class="download-btn op-icon vh" title="{% trans "Download" %}" alt="{% trans "Download" %}" />
-            <img src="{{ MEDIA_URL }}img/share-20.png" data-id="{{ repo.props.id }}" data-name="{{ repo.props.name }}" class="repo-share-btn op-icon vh" title="{% trans "Share" %}" alt="{% trans "Share" %}" />
-            <img src="{{ MEDIA_URL }}img/delete-20.png" data-url="{{ SITE_ROOT }}repo/remove/{{ repo.props.id }}/?next={{ request.path }}" data-target="{{ repo.props.name }}" class="repo-delete-btn op-icon vh" title="{% trans "Delete" %}" alt="{% trans "Delete" %}" />
+            <span data="{{ repo.props.id }}" class="icon-cloud-download download-btn op-icon vh" title="{% trans "Download and Sync" %}"></span>
+            <span data-id="{{ repo.props.id }}" data-name="{{ repo.props.name }}" class="sf-icon-share repo-share-btn op-icon vh" title="{% trans "Share" %}"></span>
+            <span data-url="{{ SITE_ROOT }}repo/remove/{{ repo.props.id }}/?next={{ request.path }}" data-target="{{ repo.props.name }}" class="icon-trash repo-delete-btn op-icon vh" title="{% trans "Delete" %}"></span>
        </td>
    </tr>
    {% endfor %}
@@ -77,9 +77,9 @@
        {% endif %}
        <td>{{ repo.user|email2nickname }}</td>
        <td>
-            <img src="{{ MEDIA_URL }}img/download-20.png" data="{{ repo.repo_id }}" class="download-btn op-icon vh" title="{% trans "Download" %}" alt="{% trans "Download" %}" />
+            <span data="{{ repo.repo_id }}" class="icon-cloud-download download-btn op-icon vh" title="{% trans "Download and Sync" %}"></span>
            {% if repo.share_type == 'personal' %}
-            <img src="{{ MEDIA_URL }}img/delete-20.png" data-url="{% url 'repo_remove_share' %}?repo_id={{ repo.repo_id }}&from={{ repo.user|urlencode }}&to={{ request.user.username|urlencode }}" data-target="{{repo.repo_name}}" class="unshare-btn op-icon vh" title="{% trans "Leave Share" %}" alt="{% trans "Leave Share" %}" />
+            <span data-url="{% url 'repo_remove_share' %}?repo_id={{ repo.repo_id }}&from={{ repo.user|urlencode }}&to={{ request.user.username|urlencode }}" data-target="{{repo.repo_name}}" class="icon-trash unshare-btn op-icon vh" title="{% trans "Leave Share" %}"></span>
            {% endif %}
        </td>
    </tr>
--- a/templates/snippets/myhome_extra_script.html
+++ b/templates/snippets/myhome_extra_script.html
@@ -58,7 +58,7 @@

    $("table tr:gt(0)").hover(
        function() {
-            $(this).find('.op-icon').css('cursor', 'pointer').removeClass('vh');
+            $(this).find('.op-icon').removeClass('vh');
        },
        function() {
            $(this).find('.op-icon').addClass('vh');