diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 0f26a1c571..4a9e86281a 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -281,6 +281,8 @@ export function initRepositoryActionView() {
 
 <style scoped lang="less">
 
+// some elements are not managed by vue, so we need to use _actions.less in addition.
+
 .action-view-body {
   display: flex;
   height: calc(100vh - 266px); // fine tune this value to make the main view has full height
@@ -336,8 +338,6 @@ export function initRepositoryActionView() {
   }
 }
 
-
-
 // ================
 // action view right
 
@@ -385,56 +385,3 @@ export function initRepositoryActionView() {
 }
 </style>
 
-<style lang="less">
-// some elements are not managed by vue, so we need to use global style
-
-// TODO: the parent element's full height doesn't work well now
-body > div.full.height {
-  padding-bottom: 0;
-}
-
-.job-status-rotate {
-  animation: job-status-rotate-keyframes 1s linear infinite;
-}
-@keyframes job-status-rotate-keyframes {
-  100% {
-    transform:rotate(360deg);
-  }
-}
-
-.job-step-section {
-  margin: 10px;
-  .job-step-logs {
-    font-family: monospace, monospace;
-    .job-log-line {
-      display: flex;
-      line-num {
-        width: 48px;
-        color: var(--color-grey-light);
-        text-align: right;
-      }
-      log-time {
-        color: var(--color-grey-light);
-        margin-left: 10px;
-        white-space: nowrap;
-      }
-      log-msg {
-        flex: 1;
-        word-break: break-all;
-        white-space: break-spaces;
-        margin-left: 10px;
-      }
-    }
-
-    // TODO: group support
-    .job-log-group {
-    }
-
-    .job-log-group-summary {
-    }
-
-    .job-log-list {
-    }
-  }
-}
-</style>
diff --git a/web_src/less/_actions.less b/web_src/less/_actions.less
new file mode 100644
index 0000000000..b149ab6fe4
--- /dev/null
+++ b/web_src/less/_actions.less
@@ -0,0 +1,51 @@
+@import "variables.less";
+
+// TODO: the parent element's full height doesn't work well now
+body > div.full.height {
+  padding-bottom: 0;
+}
+
+.job-status-rotate {
+  animation: job-status-rotate-keyframes 1s linear infinite;
+}
+@keyframes job-status-rotate-keyframes {
+  100% {
+    transform:rotate(360deg);
+  }
+}
+
+.job-step-section {
+  margin: 10px;
+  .job-step-logs {
+    font-family: monospace, monospace;
+    .job-log-line {
+      display: flex;
+      line-num {
+        width: 48px;
+        color: var(--color-grey-light);
+        text-align: right;
+      }
+      log-time {
+        color: var(--color-grey-light);
+        margin-left: 10px;
+        white-space: nowrap;
+      }
+      log-msg {
+        flex: 1;
+        word-break: break-all;
+        white-space: break-spaces;
+        margin-left: 10px;
+      }
+    }
+
+    // TODO: group support
+    .job-log-group {
+    }
+
+    .job-log-group-summary {
+    }
+
+    .job-log-list {
+    }
+  }
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index dafed3eb27..1232c4b7cb 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -37,5 +37,6 @@
 @import "_review";
 @import "_package";
 @import "_runner";
+@import "_actions";
 
 @import "./helpers.less";