github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[web] Add custom focus style for the color picker on Firefox and Safari (#16192)

Browse source 
* Add custom focus style for color pickers on Firefox and Safari

* Use the color name instead of the HEX code

* Apply consistent styling similar to other elements

GitOrigin-RevId: 68dc802df7da6863a0de1c89358002f4f281453b
This commit is contained in:
Rebeka Dekany 2023-12-18 13:16:13 +01:00 committed by Copybot
parent 0ac38cb70f
commit b0028a2789
3 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/js/features/project-list/components/color-picker/color-picker.tsx
View file

@ -45,7 +45,7 @@ function ColorPickerItem({ color, name }: ColorPickerItemProps) {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<span id={name} className="sr-only"> <span id={name} className="sr-only">
{t('select_color', { color })} {t('select_color', { name })}
</span> </span>
{!pickingCustomColor && color === selectedColor && ( {!pickingCustomColor && color === selectedColor && (
<Icon type="check" className="color-picker-item-icon" /> <Icon type="check" className="color-picker-item-icon" />

4
services/web/frontend/stylesheets/app/project-list-react.less
View file

@ -918,6 +918,10 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
&:focus-visible {
box-shadow: 0 0 0 2px @white, 0 0 0 3px @blue-50, 0 0 0 5px @blue-30;
}
&.more-button { &.more-button {
border: 1px solid @gray-dark; border: 1px solid @gray-dark;

2
services/web/locales/en.json
View file

@ -1612,7 +1612,7 @@
"select_an_output_file": "Select an Output File", "select_an_output_file": "Select an Output File",
"select_an_output_file_figure_modal": "Select an output file", "select_an_output_file_figure_modal": "Select an output file",
"select_cells_in_a_single_row_to_merge": "Select cells in a single row to merge", "select_cells_in_a_single_row_to_merge": "Select cells in a single row to merge",
"select_color": "Select color __color__", "select_color": "Select color __name__",
"select_folder_from_project": "Select folder from project", "select_folder_from_project": "Select folder from project",
"select_from_output_files": "select from output files", "select_from_output_files": "select from output files",
"select_from_project_files": "select from project files", "select_from_project_files": "select from project files",