답글 버튼은 CSS로 수정하는 것이 가장 어려운 것 중 하나로 드러났습니다.
포스트에 마우스를 올리거나 포커스가 맞춰질 때 답글 버튼이 더 밝아집니다. 또한 마우스를 올리면 'Reply’라는 단어가 더 굵게 보이는데, 이 부분은 마음에 들지 않습니다.
직접 마우스를 올렸을 때 글꼴 색상도 변경되지만, 아이콘만 변경되고 'Reply’라는 단어는 변경되지 않으므로 기본 상태를 통일하기 위해 CSS가 필요합니다.
답글 버튼에 적용되는 효과가 너무 많습니다. 또한 어떤 종류의 굵기/더 무거운 글꼴이 추가되고 있습니다.
아래는 제가 작성한 코드입니다. 여전히 글꼴이 커지는 효과가 발생하고 있으며, 밝아지는 효과는 제거하는 데 성공했습니다:
.post-info.edits .btn-flat svg,
.post-info.edits .btn-flat .d-button-label,
.topic-post .post-controls .create svg,
.topic-post .post-controls .create .d-button-label {
fill: #7b7b7b !important;
color: #7b7b7b !important;
}
/* 2. 호버 상태: e0e0e0로 변경 */
.post-info.edits .btn-flat:hover svg,
.post-info.edits .btn-flat:hover .d-button-label,
.topic-post .post-controls .create:hover svg,
.topic-post .post-controls .create:hover .d-button-label {
fill: #e0e0e0 !important;
color: #e0e0e0 !important;
}
/* 3. 밝아짐/발광 효과와 느린 전환 제거 */
.post-info.edits .btn-flat,
.topic-post .post-controls .create {
opacity: 1 !important;
filter: none !important;
transition: none !important;
animation: none !important;
}
/* 4. 스크롤 하이라이트가 색상을 흐리게 만드는 것 방지 */
.topic-post.highlighted .post-controls .create,
.topic-post.highlighted .post-info.edits .btn-flat {
filter: none !important;
opacity: 1 !important;
}
```\n
내장된 스타일링을 통해 아이콘/글꼴/텍스트를 수정할 수 있다면 꽤 멋질 것 같습니다. 제 필요에 맞게 기본 외관을 좋게 만들기 위해 이렇게 많은 CSS를 작성하고 있기 때문입니다.
더 나은 외관을 만드는 데 성공했지만, 이중 버튼과 다양한 스타일 적용으로 인해 많은 문제를 일으켰기 때문에 해당 CSS를 제거해야 했습니다.