remove unnecessary "span.color .svg {}"

Author: wxiaoguang

web_src/css/base.css

@@ -2420,18 +2420,6 @@ a.ui.basic.label:hover {
   height: 2.1666em !important;
 }
 
-span.green .svg {
-  color: var(--color-green);
-}
-
-span.red .svg {
-  color: var(--color-red);
-}
-
-span.purple .svg {
-  color: var(--color-purple);
-}
-
 .migrate .svg.gitea-git {
   color: var(--color-git);
 }

web_src/js/components/ActionRunStatus.vue

@@ -1,10 +1,10 @@
 <template>
-  <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" :class-name="className" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-check-circle-fill" class="ui text green" :size="size" :class-name="className" v-if="status === 'success'"/>
   <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
   <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
   <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
   <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
-  <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/>
+  <SvgIcon name="octicon-x-circle-fill" class="ui text red" :size="size" v-else/>
 </template>
 
 <script>

web_src/js/components/ContextPopup.vue

@@ -3,7 +3,7 @@
     <div v-if="loading" class="ui active centered inline loader"/>
     <div v-if="!loading && issue !== null">
       <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
-      <p><svg-icon :name="icon" :class="[color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
+      <p><svg-icon :name="icon" :class="['text', color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
       <p>{{ body }}</p>
       <div>
         <div