Tweak actions color and borders

Author: silverwind

web_src/css/themes/theme-gitea-dark.css

@@ -61,10 +61,10 @@
   --color-secondary-hover: var(--color-secondary-dark-3);
   --color-secondary-active: var(--color-secondary-dark-2);
   /* console colors - used for actions console and console files */
-  --color-console-fg: #d9dde2;
-  --color-console-fg-subtle: #95989c;
-  --color-console-bg: #1c2023;
-  --color-console-border: #272b2e;
+  --color-console-fg: #f8f8f9;
+  --color-console-fg-subtle: #bec4c8;
+  --color-console-bg: #181b1d;
+  --color-console-border: #313538;
   --color-console-hover-bg: #ffffff16;
   --color-console-active-bg: #313538;
   --color-console-menu-bg: #272b2e;

web_src/css/themes/theme-gitea-light.css

@@ -61,14 +61,14 @@
   --color-secondary-hover: var(--color-secondary-dark-5);
   --color-secondary-active: var(--color-secondary-dark-6);
   /* console colors - used for actions console and console files */
-  --color-console-fg: #eeeff2;
-  --color-console-fg-subtle: #959cab;
-  --color-console-bg: #262936;
-  --color-console-border: #383c47;
+  --color-console-fg: #f8f8f9;
+  --color-console-fg-subtle: #bec4c8;
+  --color-console-bg: #181b1d;
+  --color-console-border: #313538;
   --color-console-hover-bg: #ffffff16;
-  --color-console-active-bg: #454a57;
-  --color-console-menu-bg: #383c47;
-  --color-console-menu-border: #5c6374;
+  --color-console-active-bg: #313538;
+  --color-console-menu-bg: #272b2e;
+  --color-console-menu-border: #464a4d;
   /* named colors */
   --color-red: #db2828;
   --color-orange: #f2711c;

web_src/js/components/RepoActionView.vue

@@ -622,6 +622,8 @@ export function initRepositoryActionView() {
   width: 70%;
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--color-console-border);
+  border-radius: var(--border-radius);
 }
 
 /* begin fomantic button overrides */
@@ -681,7 +683,6 @@ export function initRepositoryActionView() {
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
-  border-bottom: 1px solid var(--color-console-border);
   background-color: var(--color-console-bg);
   position: sticky;
   top: 0;
@@ -705,6 +706,7 @@ export function initRepositoryActionView() {
   background-color: var(--color-console-bg);
   max-height: 100%;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+  border-top: 1px solid var(--color-console-border);
   z-index: 0;
 }
 
@@ -790,7 +792,7 @@ export function initRepositoryActionView() {
 /* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */
 .job-log-line .line-num, .log-time-seconds {
   width: 48px;
-  color: var(--color-grey-light);
+  color: var(--color-text-light-3);
   text-align: right;
   user-select: none;
 }
@@ -806,7 +808,7 @@ export function initRepositoryActionView() {
 
 .job-log-line .log-time,
 .log-time-stamp {
-  color: var(--color-grey-light);
+  color: var(--color-text-light-3);
   margin-left: 10px;
   white-space: nowrap;
 }