diff --git a/public/theme/element-extra.css b/public/theme/element-extra.css
index 3082e3e97..06b4d9f30 100644
--- a/public/theme/element-extra.css
+++ b/public/theme/element-extra.css
@@ -247,6 +247,15 @@ td .el-button.el-button--mini {
   border-top-color: #676a6c;
 }
 
+.text-link {
+  color: info!important;
+}
+
+.text-link:hover {
+  color: info!important;
+  filter: opacity(65%)!important;
+}
+
 .text-danger {
   color: danger;
 }
diff --git a/src/views/audits/CommandExecutionList.vue b/src/views/audits/CommandExecutionList.vue
index c5c4e327c..a073203a0 100644
--- a/src/views/audits/CommandExecutionList.vue
+++ b/src/views/audits/CommandExecutionList.vue
@@ -42,7 +42,7 @@ export default {
                 vm.relationDialog.tableConfig.url = setUrlParam(vm.relationDialog.tableConfig.url, 'commandexecution', row.id)
                 vm.relationDialog.show = true
               }
-              return <el-link class='link' onClick={onClick}>{ cellValue.length }</el-link>
+              return <el-link class='text-link' onClick={onClick}>{ cellValue.length }</el-link>
             }
           },
           command: {
@@ -67,7 +67,7 @@ export default {
             formatter: (row) => {
               const label = this.$t('audits.View')
               const route = { to: { name: 'CeleryTaskLog', params: { id: row.id }}}
-              return <router-link class='link' {...{ attrs: route }} target='_blank'>{ label }</router-link>
+              return <router-link class='text-link' {...{ attrs: route }} target='_blank'>{ label }</router-link>
             }
           },
           date_start: {
@@ -137,12 +137,5 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-  .link {
-    color: var(--color-info);
-    &:hover {
-      color: var(--color-info);
-      filter: opacity(65%);
-    }
-  }
+<style>
 </style>