참고로, 대량 작업을 수행하기 위해 안전 모드로 진입하는 것도 테마 구성 요소를 모든 사용자에게 비활성화하는 것의 대안이 될 수 있습니다. 물론 여전히 번거로운 과정이지만, 다른 사용자에게 미치는 영향은 더 적을 수 있습니다?
네, 세이프 모드에 대해 알게 된 후에도 그렇게 생각했습니다.
그래도 위젯이 노출되길 원합니다.
1개의 좋아요
안녕하세요,
컴포넌트 감사합니다! 포럼 https://community.escapecollective.com/ 에서 해당 컴포넌트를 사용하면서 문제가 발생했습니다. 토픽 제목을 클릭하면 SPA가 다시 로드됩니다(해당 문제가 담긴 GIF를 첨부했습니다). 하지만 제목이 아닌 카드의 다른 부분을 클릭하면 정상적으로 작동합니다. 이 문제는 페이지가 다시 로드되면서 게스트 게이트(Guest Gate) 컴포넌트가 제대로 작동하지 않아 발견되었습니다.
해결 방안에 대한 제안은 여기 있습니다: Guest Gate Theme Component - #154 by Don
해당 문제를 확인해 주시겠습니까?
감사합니다.
Denis D.
2개의 좋아요
마지막 Discourse 업데이트 이후로 무언가 변경된 것 같습니다.
이제 제 주제 카드의 왼쪽 가장자리만 이 CSS를 따르고 있으며, 수정 방법을 찾기 위해 이것저것 시도해 보았지만 아직까지 성공하지 못했습니다.
다른 분들도 확인해 주실 수 있으며, 필요한 변경 사항을 찾아낼 수 있는지 확인해 주시겠습니까?
문제는 읽은 주제에 대한 배경색을 위한 최근에 추가된 변수입니다.
이 변경 사항에 대한 #dev-news가 있는지 모르겠습니다. 하지만 다음 링크에서 관련 정보를 찾을 수 있습니다:
그렇다면 이 CSS를 억제하는 방법이 있을까요? 제 사이트 디자인이 엉망이 되었는데, 저는 코딩을 전혀 모르는 사람이라 어떻게 해결해야 할지 모르겠습니다.
요소를 검사하는 도구를 살펴보니, 깨진 모든 주제에 'visited’라는 단어가 표시되고, 아직 정상적으로 보이는 주제에는 이 단어가 빠져 있는 것을 확인할 수 있었습니다.
이 문제를 어떻게 수정할 수 있을까요?
아직 방문하지 않은 주제 (호버 없음):
마우스를 올리면:
나머지 주제들은 모두 깨져 있습니다.
그렇게까지 추적하기가 어렵지는 않았어야 했는데. (내 실수인 것 같지만, 그래도…)
아래 코드를 추가하면:
.topic-list-item-background-color--visited {
background: none
}
기대하지 않았던 부작용 없이 해결된 것 같습니다.
스타일에서 이제 다음 두 변수만 변경하면 됩니다:
--topic-list-item-background-color
--topic-list-item-background-color--visited
아래와 같이 작성하면 작동합니다:
:root {
--topic-list-item-background-color: YOUR COLOR HERE;
--topic-list-item-background-color--visited: YOUR COLOR HERE;
}
그렇게 하면 라이트와 다크를 전환할 때 발생하는 차이를 어떻게 설명할 수 있을까요?
또한, 방문 후에 색상이 달라지는 것도 원하지 않고, 호버 시 색상 변경도 다루지 않고 있습니다.
css 함수 light-dark()를 사용할 수 있습니다.
--variable-name: light-dark(#efedea, #223a2c);
둘 다 동일한 값으로 설정하면 됩니다.
코어에서 :hover에 대한 작업은 수행되지 않았습니다. 호버 시 원하는 값으로 변수를 설정하도록 확인해야 합니다.
1개의 좋아요
여전히 나에게 작동하지 않습니다.
처음에 작동했던 코드는 이거였습니다:
// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
그런데 최신 업데이트 후에 이걸 추가했는데 잠시 작동하더니 다시 멈췄습니다:
.topic-list-item-background-color--visited {
background: none
}
그리고, 여기서 말씀하신 내용을 바탕으로 현재 코드를 추가하는 방식과, 전체를 아래 코드로 교체하는 방식을 모두 시도해 보았습니다:
:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}
읽지 않은 스레드는 정상적으로 작동하는데, 방문한 스레드는 깨져 있으니 hover-visited를 처리해야 할 다른 변수가 있는 것 같습니다.
이 변수는 존재하지 않습니다.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}
이것이 필요한 내용일 것입니다. 도움이 되길 바랍니다!
제가 생각해 낸 것 중 가장 줄 수가 적으면서도 올바르게 작동하는 코드입니다.
// 주제 카드 색상을 테마와 혼합
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}
.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
이 테마 컴포넌트에 대한 PR을 작성했으며, 두 가지 항목을 추가했습니다:
기능: 추천 주제 전환
추천 주제에 표시 설정을 추가합니다.
이 기능 요청에서 설명된 바와 같이, 추천 주제에 대한 토픽 카드 사용을 선택 사항으로 만듭니다.
기능: 카테고리 제한
카테고리에 표시 설정을 추가합니다.
비어 있지 않은 경우, 선택된 카테고리에서만 토픽 카드를 사용합니다.
6개의 좋아요
훌륭한 추가입니다 @RGJ. 저희 인스턴스에서 테스트해 봤는데 완벽하게 작동합니다. 제 생각에는 반드시 머지되어야 합니다.
1개의 좋아요
discourse 3.5.0에서 이 tc와 관련된 또 다른 작은 CSS 버그를 발견했습니다:
편집 기록 및 인용 확장 요소 등 여러 UI 요소 주위에 테두리가 추가됩니다.
이는 버튼 요소에서 btn no-text 클래스가 누락되었기 때문입니다.
리뷰하고 병합했습니다. 추가해 주셔서 감사합니다!
3개의 좋아요
이 컴포넌트는 Horizon 테마와 호환되지 않는 것으로 표시되어 있습니다.
두 컴포넌트 모두 토픽 목록을 커스터마이징하기 때문에, 첫 번째 게시물에 명시된 대로 변경하기가 쉽지 않을 것 같습니다:
2개의 좋아요
여기서 보이는 스레드에 이 CSS를 어떻게 추가할 수 있나요? CSS가 너무 많네요.