graphql / graphql/graphql.github.io

Dark mode code block ("CodeMirror") sections display a mysterious white square

Đang mở
#1,797 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
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:

Screenshot 2024-10-19 at 19 44 36

### 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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.