Close #613

src/public/app/widgets/buttons/attachments_actions.js

@@ -113,14 +113,14 @@ export default class AttachmentActionsWidget extends BasicWidget {
             const $openAttachmentButton = this.$widget.find("[data-trigger-command='openAttachment']");
             $openAttachmentButton
                 .addClass("disabled")
-                .append($('<span class="disabled-tooltip"> (?)</span>')
+                .append($('<span class="bx bx-info-circle disabled-tooltip" />')
                     .attr("title", t('attachments_actions.open_externally_detail_page'))
                 );
             if (isElectron) {
                 const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
                 $openAttachmentCustomButton
                     .addClass("disabled")
-                    .append($('<span class="disabled-tooltip"> (?)</span>')
+                    .append($('<span class="bx bx-info-circle disabled-tooltip" />')
                         .attr("title", t('attachments_actions.open_externally_detail_page'))
                     );
             }
@@ -129,7 +129,7 @@ export default class AttachmentActionsWidget extends BasicWidget {
             const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
             $openAttachmentCustomButton
                 .addClass("disabled")
-                .append($('<span class="disabled-tooltip"> (?)</span>')
+                .append($('<span class="bx bx-info-circle disabled-tooltip" />')
                     .attr("title", t('attachments_actions.open_custom_client_only'))
                 );
         }

src/public/stylesheets/style.css

@@ -278,8 +278,15 @@ div.ui-tooltip {
 
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
-    color: var(--menu-text-color);
+    margin-left: 8px;
+    font-size: .5em;
+    color: var(--disabled-tooltip-icon-color);
     cursor: help;
+    opacity: .75;
+}
+
+.dropdown-menu .disabled .disabled-tooltip:hover {
+    opacity: 1;
 }
 
 .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled) {

src/public/stylesheets/theme-dark.css

@@ -19,6 +19,8 @@
     --dropdown-border-color: #555;
     --dropdown-shadow-opacity: .4;
     --dropdown-item-icon-destructive-color: #de6e5b;
+    --disabled-tooltip-icon-color: #7fd2ef;
+
 
     --accented-background-color: #555;
     --more-accented-background-color: #777;

src/public/stylesheets/theme-light.css

@@ -23,6 +23,7 @@ html {
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: .2;
     --dropdown-item-icon-destructive-color: #ec5138;
+    --disabled-tooltip-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
     --more-accented-background-color: #ddd;