mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-08 07:21:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add a different background color on op selected, based on user test feedback

Browse source
This commit is contained in:
Robin Scholtes 2023-05-15 13:34:13 +12:00
parent 82837254ea
commit 9ec902a369
3 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/web/stylesheets/components/_operation.css
View file

@ -57,6 +57,17 @@
color: #47d047; color: #47d047;
} }
.operation.selected {
background-color: var(--selected-operation-bg-colour);
}
@media only screen and (min-width: 768px){
.operation.selected {
background-color: var(--op-list-operation-bg-colour);
}
}
.operation.selected > .op-icon.check-icon { .operation.selected > .op-icon.check-icon {
display: inline-block; display: inline-block;
} }

2
src/web/stylesheets/themes/_classic.css
View file

@ -55,7 +55,7 @@
--rec-list-operation-border-colour: #d3e8c0; --rec-list-operation-border-colour: #d3e8c0;
--selected-operation-font-color: #c09853; --selected-operation-font-color: #c09853;
--selected-operation-bg-colour: #fcf8e3; --selected-operation-bg-colour: rgba(217, 237, 247, 0.5);
--selected-operation-border-colour: #fbeed5; --selected-operation-border-colour: #fbeed5;
--breakpoint-font-colour: #b94a48; --breakpoint-font-colour: #b94a48;

3
src/web/waiters/RecipeWaiter.mjs
View file

@ -613,7 +613,8 @@ class RecipeWaiter {
addSelectedClass(opDataName) { addSelectedClass(opDataName) {
const ops = document.querySelectorAll(`.operation[data-name="${opDataName}"]`); const ops = document.querySelectorAll(`.operation[data-name="${opDataName}"]`);
// A selected operation can occur twice if it's in favourites and the original category op-list // A selected operation can occur twice if it's in favourites
// and the original category op-list
ops.forEach((op => { ops.forEach((op => {
op.classList.add("selected"); op.classList.add("selected");
})) }))