Skip to content

Improve Actions CSS #24864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 24, 2023
Merged

Improve Actions CSS #24864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6703a3f
Improve Actions CSS
silverwind May 22, 2023
5e6bd3b
don't change fg on line hover
silverwind May 22, 2023
2b94760
use --fonts-monospace
silverwind May 22, 2023
dbe537a
reduce margins
silverwind May 23, 2023
de96503
Add validations.required check to dropdown field (#24849)
yp05327 May 22, 2023
a5477b8
Merge branch 'main' into acss
silverwind May 23, 2023
3f62426
Merge branch 'main' into acss
lunny May 24, 2023
569c504
Merge branch 'main' into acss
lunny May 24, 2023
a538950
Merge branch 'main' into acss
GiteaBot May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,10 @@
--color-secondary-alpha-90: #dededee1;
/* console colors */
--color-console-fg: #ffffff;
--color-console-bg: #171717;
--color-console-bg: #252a2f;
--color-console-border: #ffffff16;
--color-console-hover-bg: #ffffff16;
--color-console-active-bg: #353a3f;
/* named colors */
--color-red: #db2828;
--color-orange: #f2711c;
Expand Down
9 changes: 7 additions & 2 deletions web_src/css/themes/theme-arc-green.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,13 @@
--color-secondary-alpha-70: #525767b3;
--color-secondary-alpha-80: #525767cc;
--color-secondary-alpha-90: #525767e1;
/* colors */
/* console colors */
--color-console-fg: #ffffff;
--color-console-bg: #262936;
--color-console-border: #ffffff16;
--color-console-hover-bg: #ffffff16;
--color-console-active-bg: #383c47;
/* named colors */
--color-red: #cc4848;
--color-orange: #cc580c;
--color-yellow: #cc9903;
Expand Down Expand Up @@ -175,7 +181,6 @@
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b;

accent-color: var(--color-accent);
color-scheme: dark;
}
Expand Down
63 changes: 43 additions & 20 deletions web_src/js/components/RepoActionView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
{{ locale.cancel }}
</button>
<button class="ui basic small compact button secondary" @click="rerun()" v-else-if="run.canRerun">
<button class="ui basic small compact button secondary gt-mr-0" @click="rerun()" v-else-if="run.canRerun">
{{ locale.rerun_all }}
</button>
</div>
Expand Down Expand Up @@ -422,20 +422,20 @@ export function ansiLogToHTML(line) {
<style scoped>
.action-view-body {
display: flex;
height: calc(100vh - 266px); /* fine tune this value to make the main view has full height */
gap: 12px;
}

/* ================ */
/* action view header */

.action-view-header {
margin: 20px 0;
margin-top: 8px;
margin-bottom: 4px;
}

.action-info-summary {
display: flex;
align-items: center;
margin-top: 1rem;
justify-content: space-between;
}

Expand All @@ -452,7 +452,12 @@ export function ansiLogToHTML(line) {
.action-commit-summary {
display: flex;
gap: 5px;
margin: 10px 0 10px 25px;
margin: 5px 0 0 25px;
}

.action-view-left, .action-view-right {
padding-top: 12px;
padding-bottom: 12px;
}

/* ================ */
Expand All @@ -461,7 +466,10 @@ export function ansiLogToHTML(line) {
.action-view-left {
width: 30%;
max-width: 400px;
overflow-y: scroll;
position: sticky;
top: 0;
max-height: 100vh;
overflow-y: auto;
}

.job-group-section .job-group-summary {
Expand Down Expand Up @@ -490,11 +498,15 @@ export function ansiLogToHTML(line) {
padding-right: 3px;
}

.job-brief-list {
display: flex;
flex-direction: column;
gap: 8px;
}

.job-brief-item {
margin: 5px 0;
padding: 10px;
background: var(--color-info-bg);
border-radius: 5px;
border-radius: var(--border-radius);
text-decoration: none;
display: flex;
flex-wrap: nowrap;
Expand All @@ -503,12 +515,12 @@ export function ansiLogToHTML(line) {
}

.job-brief-item:hover {
background-color: var(--color-secondary);
background-color: var(--color-hover);
}

.job-brief-item.selected {
font-weight: var(--font-weight-bold);
background-color: var(--color-secondary-dark-1);
background-color: var(--color-active);
}

.job-brief-item:first-of-type {
Expand Down Expand Up @@ -555,8 +567,7 @@ export function ansiLogToHTML(line) {

.action-view-right {
flex: 1;
background-color: var(--color-console-bg);
color: var(--color-secondary-dark-2);
color: var(--color-secondary-dark-3);
max-height: 100%;
width: 70%;
display: flex;
Expand All @@ -565,7 +576,12 @@ export function ansiLogToHTML(line) {

.job-info-header {
padding: 10px;
border-bottom: 1px solid var(--color-grey);
border-bottom: 1px solid var(--color-console-border);
background-color: var(--color-console-bg);
position: sticky;
top: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0;
height: 60px;
}

.job-info-header .job-info-header-title {
Expand All @@ -580,8 +596,9 @@ export function ansiLogToHTML(line) {
}

.job-step-container {
background-color: var(--color-console-bg);
max-height: 100%;
overflow: auto;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.job-step-container .job-step-summary {
Expand All @@ -590,6 +607,7 @@ export function ansiLogToHTML(line) {
display: flex;
align-items: center;
user-select: none;
border-radius: var(--border-radius);
}

.job-step-container .job-step-summary .step-summary-msg {
Expand All @@ -600,11 +618,17 @@ export function ansiLogToHTML(line) {
margin-left: 16px;
}

.job-step-container .job-step-summary:hover,
.job-step-container .job-step-summary:hover {
color: var(--color-console-fg);
background-color: var(--color-console-hover-bg);

}

.job-step-container .job-step-summary.selected {
color: var(--color-console-fg);
background-color: var(--color-black-light);
border-radius: 5px;
background-color: var(--color-console-active-bg);
position: sticky;
top: 60px;
}

@media (max-width: 768px) {
Expand Down Expand Up @@ -639,7 +663,7 @@ export function ansiLogToHTML(line) {
}

.job-step-section .job-step-logs {
font-family: monospace;
font-family: var(--fonts-monospace);
margin: 8px 0;
font-size: 12px;
}
Expand All @@ -649,7 +673,6 @@ export function ansiLogToHTML(line) {
}

.job-step-section .job-step-logs .job-log-line:hover {
color: var(--color-console-fg);
background-color: var(--color-console-hover-bg);
}

Expand Down