graphql / graphql/graphql.github.io
Dark mode code block ("CodeMirror") sections display a mysterious white square
- Ngôn ngữ chính
- TypeScript
- Star
- 889
- Fork
- 1.5k
- Merge trung bình
- 4 ngày 12 giờ
- Pull request đã merge (30 ngày)
- 21
Mô tả
### Description
When looking at the interactive code block (maybe called "CodeMirror") sections in dark mode, there is a white square that doesn't seem to do anything. I could see this on Chrome, Firefox, and Safari.
### Steps to Reproduce
1. Go to a page with an interactive code block (e.g., https://graphql.org/learn/queries/)
2. You may see something like this:
### Expected Result
I would expect not to see the white square.
### Actual Result
...I saw the white square.
### Additional Context
There's a small chunk of CSS that sets this white square to be white:
```css
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
```
On light mode, this makes the square invisible (because the background is also white). However, this CSS doesn't seem to account for dark mode.
My proposed fix is a little lazy. I'll just make the square invisible on dark mode:
```css
.CodeMirror-scrollbar-filler:is(html[class~=dark] *) ,
.CodeMirror-gutter-filler:is(html[class~=dark] *) {
background-color: transparent; /* The little square between H and V scrollbars */
}
```
I think that a larger fix might be ideal in the future, because the scrollbars are invisible anyway, so this square doesn't seem to have any use (see: #1617). But maybe my proposed fix is OK in the meantime.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu tại graphql.org/learn/queries/ và kiểm tra phần CodeMirror tương tác ở chế độ tối, sau đó tìm các quy tắc CSS cho .CodeMirror-scrollbar-filler và .CodeMirror-gutter-filler. Hoàn thành khi hình vuông màu trắng không còn hiển thị ở chế độ tối nhưng khối mã tương tác vẫn hoạt động; hãy kiểm tra kết quả trong Chrome, Firefox và Safari.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- css
- Lĩnh vực
- frontend, web-dev
- Loại issue
- Lỗi
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 52/100