blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Color adjustments to statuses

Browse Source
This commit is contained in:
Pablo Vazquez 2022-05-05 15:39:31 +02:00
parent 79397a4ed3
commit 84fe14fa46
1 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
web/app/src/assets/base.css
View File

@ -37,21 +37,25 @@
--transition-speed: 240ms; --transition-speed: 240ms;
--transition-speed-fast: 60ms; --transition-speed-fast: 60ms;
--color-status-active: hsl(0 50% 50%); --color-status-active: hsl(166 100% 46%);
--color-status-archived: hsl(0 50% 50%); --color-status-completed: hsl(166 100% 46%);
--color-status-archived: hsl(0 0% 25%);
--color-status-archiving: hsl(0 50% 50%); --color-status-archiving: hsl(0 50% 50%);
--color-status-cancel-requested: hsl(0 50% 50%);
--color-status-canceled: hsl(0 50% 50%); --color-status-construction-failed: hsl(356 100% 59%);
--color-status-completed: hsl(0 50% 50%); --color-status-fail-requested: hsl(356 100% 59%);
--color-status-construction-failed: hsl(0 50% 50%); --color-status-failed: hsl(356 100% 59%);
--color-status-fail-requested: hsl(0 50% 50%); --color-status-soft-failed: hsl(356 70% 40%);
--color-status-failed: hsl(0 50% 50%);
--color-status-soft-failed: hsl(0 50% 50%); --color-status-queued: hsl(194 100% 46%);
--color-status-paused: hsl(0 50% 50%); --color-status-requeued: hsl(194 100% 46%);
--color-status-queued: hsl(0 50% 50%); --color-status-canceled: hsl(194 100% 46%);
--color-status-requeued: hsl(0 50% 50%); --color-status-paused: hsl(194 100% 46%);
--color-status-under-construction: hsl(0 50% 50%);
--color-status-waiting-for-files: hsl(0 50% 50%); --color-status-cancel-requested: hsl(194 30% 50%);
--color-status-under-construction: hsl(194 30% 50%);
--color-status-waiting-for-files: hsl(194 30% 50%);
} }
html, html,
@ -276,56 +280,68 @@ footer {
} }
.indicator { .indicator {
background-color: var(--color-background); --indicator-color: var(--color-background);
box-shadow: 0 0 3px black;
background-color: var(--indicator-color);
border: 3px solid var(--indicator-color);
border-radius: 50%; border-radius: 50%;
display: block; display: block;
height: 12px; height: 6px;
width: 12px; width: 6px;
} }
.status-active { .status-active {
background-color: hsl(86, 81%, 44%); --indicator-color: var(--color-status-active);
} }
.status-canceled { .status-canceled {
background-color: hsl(0 0% 50%); --indicator-color: var(--color-status-canceled);
} }
.status-completed { .status-completed {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-completed);
} }
.status-construction-failed { .status-construction-failed {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-construction-failed);
} }
.status-failed { .status-failed {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-failed);
} }
.status-soft-failed { .status-soft-failed {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-soft-failed);
} }
.status-paused { .status-paused {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-paused);
} }
.status-queued { .status-queued {
background-color: hsl(207, 67%, 51%); --indicator-color: var(--color-status-queued);
} }
.status-archived { .status-archived {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-archived);
} }
.status-archiving { .status-archiving {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-archiving);
} }
.status-cancel-requested { .status-cancel-requested {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-cancel-requested);
} }
.status-fail-requested { .status-fail-requested {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-fail-requested);
} }
.status-requeued { .status-requeued {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-requeued);
} }
.status-under-construction { .status-under-construction {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-under-construction);
} }
.status-waiting-for-files { .status-waiting-for-files {
background-color: hsl(0 50% 50%); --indicator-color: var(--color-status-waiting-for-files);
}
.status-fail-requested,
.status-archiving,
.status-active,
.status-queued,
.status-waiting-for-files,
.status-under-construction,
.status-cancel-requested {
background-color: transparent;
} }