From 202803fc69d21763a06d8d0f5a4c46509c18f6f1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 15 Mar 2023 03:20:19 +0100
Subject: Replace Less with CSS (#23481)

Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.

The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.

Fixes: https://github.com/go-gitea/gitea/issues/15565
---
 web_src/js/components/RepoActionView.vue | 267 ++++++++++++++++---------------
 1 file changed, 139 insertions(+), 128 deletions(-)

(limited to 'web_src/js/components/RepoActionView.vue')

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index bf84186c1a..079c81921e 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -286,51 +286,54 @@ export function initRepositoryActionView() {
 
 </script>
 
-<style scoped lang="less">
-
+<style scoped>
 .action-view-body {
   display: flex;
-  height: calc(100vh - 266px); // fine tune this value to make the main view has full height
+  height: calc(100vh - 266px); /* fine tune this value to make the main view has full height */
 }
 
-// ================
-// action view header
+/* ================ */
+/* action view header */
 
 .action-view-header {
   margin: 0 20px 20px 20px;
-  .run_cancel {
-    border: none;
-    color: var(--color-red);
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    transition:transform 0.2s;
-  };
-  .run_approve {
-    border: none;
-    color: var(--color-green);
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    transition:transform 0.2s;
-  };
-  .run_cancel:hover, .run_approve:hover {
-    transform:scale(130%);
-  };
+}
+
+.action-view-header .run_cancel {
+  border: none;
+  color: var(--color-red);
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.action-view-header .run_approve {
+  border: none;
+  color: var(--color-green);
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.action-view-header .run_cancel:hover,
+.action-view-header .run_approve:hover {
+  transform: scale(130%);
 }
 
 .action-info-summary {
   font-size: 150%;
   height: 20px;
   display: flex;
+}
 
-  .action-title {
-    padding: 0 5px;
-  }
+.action-info-summary .action-title {
+  padding: 0 5px;
 }
 
-// ================
-// action view left
+/* ================ */
+/* action view left */
 
 .action-view-left {
   width: 30%;
@@ -339,51 +342,52 @@ export function initRepositoryActionView() {
   margin-left: 10px;
 }
 
-.job-group-section {
-  .job-group-summary {
-    margin: 5px 0;
-    padding: 10px;
-  }
+.job-group-section .job-group-summary {
+  margin: 5px 0;
+  padding: 10px;
+}
 
-  .job-brief-list {
-    .job-brief-item {
-      margin: 5px 0;
-      padding: 10px;
-      background: var(--color-info-bg);
-      border-radius: 5px;
-      text-decoration: none;
-      display: flex;
-      justify-items: center;
-      flex-wrap: nowrap;
-      .job-brief-rerun {
-        float: right;
-        border: none;
-        background-color: transparent;
-        outline: none;
-        cursor: pointer;
-        transition:transform 0.2s;
-      };
-      .job-brief-rerun:hover{
-        transform:scale(130%);
-      };
-      .job-brief-link {
-        flex-grow: 1;
-        display: flex;
-        span {
-          margin-right: 8px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-    .job-brief-item:hover {
-      background-color: var(--color-secondary);
-    }
-  }
+.job-group-section .job-brief-list .job-brief-item {
+  margin: 5px 0;
+  padding: 10px;
+  background: var(--color-info-bg);
+  border-radius: 5px;
+  text-decoration: none;
+  display: flex;
+  justify-items: center;
+  flex-wrap: nowrap;
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-rerun {
+  float: right;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.2s;
 }
 
-// ================
-// action view right
+.job-group-section .job-brief-list .job-brief-item .job-brief-rerun:hover {
+  transform: scale(130%);
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-link {
+  flex-grow: 1;
+  display: flex;
+}
+
+.job-group-section .job-brief-list .job-brief-item .job-brief-link span {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.job-group-section .job-brief-list .job-brief-item:hover {
+  background-color: var(--color-secondary);
+}
+
+/* ================ */
+/* action view right */
 
 .action-view-right {
   flex: 1;
@@ -391,50 +395,50 @@ export function initRepositoryActionView() {
   color: var(--color-console-fg);
   max-height: 100%;
   margin-right: 10px;
-
   display: flex;
   flex-direction: column;
 }
 
-.job-info-header {
-  .job-info-header-title {
-    font-size: 150%;
-    padding: 10px;
-  }
-  .job-info-header-detail {
-    padding: 0 10px 10px;
-    border-bottom: 1px solid var(--color-grey);
-  }
+.job-info-header .job-info-header-title {
+  font-size: 150%;
+  padding: 10px;
+}
+
+.job-info-header .job-info-header-detail {
+  padding: 0 10px 10px;
+  border-bottom: 1px solid var(--color-grey);
 }
 
 .job-step-container {
   max-height: 100%;
   overflow: auto;
+}
 
-  .job-step-summary {
-    cursor: pointer;
-    padding: 5px 10px;
-    display: flex;
-
-    .step-summary-msg {
-      flex: 1;
-    }
-    .step-summary-dur {
-      margin-left: 16px;
-    }
-  }
-  .job-step-summary:hover {
-    background-color: var(--color-black-light);
-  }
+.job-step-container .job-step-summary {
+  cursor: pointer;
+  padding: 5px 10px;
+  display: flex;
 }
-</style>
 
-<style lang="less">
-// some elements are not managed by vue, so we need to use global style
+.job-step-container .job-step-summary .step-summary-msg {
+  flex: 1;
+}
 
+.job-step-container .job-step-summary .step-summary-dur {
+  margin-left: 16px;
+}
+
+.job-step-container .job-step-summary:hover {
+  background-color: var(--color-black-light);
+}
+</style>
+
+<style>
+/* some elements are not managed by vue, so we need to use global style */
 .job-status-rotate {
   animation: job-status-rotate-keyframes 1s linear infinite;
 }
+
 @keyframes job-status-rotate-keyframes {
   100% {
     transform: rotate(360deg);
@@ -443,37 +447,44 @@ export function initRepositoryActionView() {
 
 .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;
-      }
-    }
+}
+
+.job-step-section .job-step-logs {
+  font-family: monospace, monospace;
+}
 
-    // TODO: group support
-    .job-log-group {
-    }
+.job-step-section .job-step-logs .job-log-line {
+  display: flex;
+}
 
-    .job-log-group-summary {
-    }
+.job-step-section .job-step-logs .job-log-line .line-num {
+  width: 48px;
+  color: var(--color-grey-light);
+  text-align: right;
+}
+
+.job-step-section .job-step-logs .job-log-line .log-time {
+  color: var(--color-grey-light);
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.job-step-section .job-step-logs .job-log-line .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 {
 
-    .job-log-list {
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3