settings: Fix disabled select elements in modal.

The background-color and opacity is same for all
select elements in modals and settings in disabled
state, but due to the background of modal being
bright enough, the select element in modals would
not look disabled.

One possible solution could have been to set
"opacity: 1" but that changes opacity for text too
and makes it darker which is not the case for other
select elements.

So instead made the background slightly darker for
select elements inside the modal using hsla property.
It might not be exact same as the other select elements,
but it is still better than the previous behavior.

For role element in bot edit form, we used to set
opacity to 1 to fix this bug, and this commit removes
it as we have fixed it for all modals in general
This commit is contained in:
Sahil Batra 2023-02-16 19:53:32 +05:30 committed by Tim Abbott
parent 1c055f402d
commit ca70089842
2 changed files with 4 additions and 5 deletions

View File

@ -335,6 +335,9 @@
&:disabled {
cursor: not-allowed;
background-color: hsl(0, 0%, 93%);
/* The background-color of select elements inside modal is different than the others in
settings pages, because the background of the modal is brighter than the setting page. */
background-color: hsla(0, 0%, 90%, 1);
}
}

View File

@ -867,10 +867,6 @@ input[type="checkbox"] {
margin: 10px 0 5px;
}
#bot-role-select:disabled {
opacity: 1;
}
#current_bot_avatar_image {
margin: 5px 0 8px;
}