오늘早些에 이런 일이 발생했어요. 새 답변 등에 표시되던 하이라이트 색상이 사라졌거든요.
다른 테마 10개 정도를 시도해 봤는데 전부 정상적으로 작동해요. 테마의 색 팔레트 옵션(다른 테마에도 적용되는 것들)을 6개 정도 돌려서 적용해 봤지만, 이 테마에 적용할 때는 문제가 해결되지 않아요. 이게 뭔지 정말 모르겠지만, 이제 드롭다운에 표시되는 모든 상호작용 항목이 읽은 항목과 똑같이 보여서 어떤 것이 새로운 것인지 구별할 수 없어요.
어떤 테마에서 문제가 발생하고 있나요? 기본 테마인가요? 수정된 적이 있나요?
GitHub - pyxfluff/Blackout · GitHub 테마를 사용 중인데, 컬러 팔레트를 변경한 적이 있습니다(최근이 아니라 설정할 때 변경했던 것입니다). 하지만 테마 자체는 최근 어떤 업데이트도 없었습니다. 다른 정상 작동하는 테마들의 컬러 팔레트로 교체해 보았지만 여전히 작동하지 않습니다. 마치 갑자기 꺼진 것 같습니다.
모바일 버전은 여전히 정상적으로 작동하는데, 이유를 알 수 없게 데스크톱 버전만 문제가 발생했고, 갑자기 이런 일이 일어났습니다.
또한 직접 수정할 수 있는 비선택형 테마로 내 버전도 하나 만들어 두고 있는데, 거기에서도 정확히 같은 현상이 일어나고 있습니다. 따라서 GitHub에서 푸시된 내용 때문에 발생한 문제가 아닙니다.
음, 위치는 찾았지만 어떤 것인지 아직 모르겠어요. 내 버전에서 CSS를 전부 지우고 그래도 문제가 발생하는지 확인해 봤는데, 발생하지 않았어요. 즉, Discourse 업데이트로 인해 CSS에 영향을 미치는 무언가가 변경된 것이죠. 문제는 다음 코드 안에 있습니다:
body, .boxed.white, .admin-detail, .admin-controls, .admin-controls .controls, .user-content,.group-details-container,
div.edit-category .edit-category-title-bar, .user-main .about, .user-main .about .details .primary,
.user-main .about .details, .user-stream .item, .user-stream .user-stream-item, .search-container .search-header,
.search-container .search-filters .search-advanced-filters, .search-container .search-bar,
.search-container .search-filters {
background-color:#000!important;
}
#banner, .alert.alert-info {
background-color:#18003f!important;
color:white;
}
.d-header.clearfix {
background-color:#040404!important;
}
aside.onebox, .menu-panel .panel-body-bottom .btn {
background-color:#080808;
}
.topic-list-item, tr, .menu-panel .panel-body-bottom .btn {
border-bottom:#080808;
}
h1, h2, h3, h4, h5, h6 {
color:white;
}
p, #topic-title h1 a, li, .btn, .user-card .card-content .bio, .group-card .card-content .bio,
.category-list .category-name {
color:white;
}
.topic-map, .nav-stacked, .admin-controls nav {
background:#090909;
}
.topic-map .buttons .btn {
background:#000;
}
.discourse-reactions-state-panel-reaction, .discourse-reactions-picker .discourse-reactions-picker-container,
.popup-menu, .select-kit.single-select.dropdown-select-box.is-expanded .select-kit-collection,
.select-kit.single-select.dropdown-select-box.is-expanded .select-kit-body,
.modal-inner-container {
background:#090909;
}
.menu-panel .panel-body, .user-menu .quick-access-panel li a,
.user-menu .quick-access-panel .read, .user-menu .quick-access-panel .reviewed {
background:#070707;
}
#reply-control .reply-area, #reply-control #reply-title, #reply-control .mini-tag-chooser .select-kit-header,
#reply-control .category-input .category-chooser .select-kit-header,.d-editor-textarea-wrapper,
aside.quote .title, blockquote, .d-editor-textarea-wrapper textarea {
background-color:#070707;
color:white;
}
div.instructions, .nav-pills>li>a {
color:white;
}
blockquote, aside.quote .title {
border-left:#090909;
}
.menu-panel {
background-color:#060606;
}
.topic-chat-container, .chat-live-pane .chat-messages-scroll,
.chat-messages-container .chat-message-container, .chat-messages-container .discourse-chat-transcript,
.topic-chat-drawer-header, .chat-message .chat-message-content, .chat-message {
background:#0a0a0a;
}
.btn, .list-controls .combo-box .combo-box-header {
background:#0c0c0c;
}
.btn {
&:active,
&.btn-active {
background-image: none;
border-bottom-color: transparent;
background-color: var(--primary-medium);
}
&.btn-primary {
&:active,
&.btn-active {
background-color: var(--tertiary-hover);
}
}
&.btn-danger,
&.cancel {
&:active,
&.btn-active {
background-color: var(--danger-hover);
}
}
&.ok {
&:active,
&.btn-active {
background-color: var(--success-hover);
}
}
}
.sidebar-wrapper {
background:black;
}
.sidebar-section-link-wrapper .sidebar-section-link.active,
.btn, .list-controls .combo-box .combo-box-header {
background-color:black;
}
.discourse-no-touch .sidebar-section-wrapper .sidebar-section-header-wrapper:hover {
background:black
}
// this targets the tag itself
a[data-tag-name="uspecial"] {
color: yellow !important;
}
// this changes the title on topic-lists
.tag-uspecial .raw-topic-link {
background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*/ This targets the background/body of the OP
body.tag-uspecial article#post_1 {
font-weight: bold;
border: 2px dotted blue;
}*/
.tag-uspecial #topic-title .fancy-title {
background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
여기서 시행착오를 거친 결과, 특정 원인은 바로 다음 코드인 것으로 확인되었습니다.
.menu-panel .panel-body, .user-menu .quick-access-panel li a,
.user-menu .quick-access-panel .read, .user-menu .quick-access-panel .reviewed {
background:#070707;
}