utterances icon indicating copy to clipboard operation
utterances copied to clipboard

Optimize the "tabnav-tab" button

Open zsdycs opened this issue 4 years ago • 1 comments

1. Optimize the style of highlighted "tabnav-tab" button when accessed by the "tab" key

There are two highlighting methods in the existing themes:

  • outline
  • box-shadow

The following example uses the two themes github-dark and github-dark-orange as examples.

  • github-dark => outline
  • github-dark-orange => box-shadow

github-dark before modification

“Write” button, when accessed by the "tab" key

image

“Preview” button, when accessed by the "tab" key

image

github-dark after modification

“Write” button, when accessed by the "tab" key

image

“Preview” button, when accessed by the "tab" key

image

github-dark-orange before modification

“Write” button, when accessed by the "tab" key

image

“Preview” button, when accessed by the "tab" key

image

github-dark-orange after modification

“Write” button, when accessed by the "tab" key

image

“Preview” button, when accessed by the "tab" key

image

2. Optimize the style when clicking the "tabnav-tab" button

This problem is because the "github-dark-orange" theme uses :focus for highlighting, it should use :focus-visible

This is the comparison between the "github-dark" theme and the "github-dark-orange" theme before modification:

"github-dark":

image

"github-dark-orange":

image

This is the "github-dark-orange" theme after modification:

image

zsdycs avatar Jun 09 '21 10:06 zsdycs

fix: #519

zsdycs avatar Dec 23 '21 06:12 zsdycs