fix: border-radius of comment-app
將留言區塊改為圓角方形,消除原本的白色角落。
修改前:

修改後:

感謝發 PR,下面是 HackMD 留言區塊的 HTML:
<div class="ui-comment-app small" id="hackmd-app">
<div id="comment-app">
<div class="open-comments">
...
</div>
</div>
</div>
HackMD 本身的 reset CSS 就有 box-sizing 的設定,所以不需要另外設定:
* {
box-sizing: border-box;
}
並且 CSS 選擇器 .ui-comment-app * 不需要使用 *,讓所以 .ui-comment-app 的後代都新增 border-radius,只需讓 .open-comments 新增即可:
.open-comments {
border-radius: 4px;
}
感謝修改建議!將相關段落照您的建議修改,並且將其移至程式碼處理 comment 部分的區段。
另外一併修改在 ui-comment-button-container 的 border-radius,使其與預設 stylesheets 當中的 ui-comment-container 一致。
修改前:

修改後:

感謝修正!
你指的 .ui-comment-button-container 主要是在解決 hover 會有白色角落嗎?
.ui-comment-app .ui-comment-button-container.comment:not(.active):hover {
z-index: 1050;
background-color: white;
}
我會傾向將背景色設為透明,因為在原主題 hover 後變為白色背景也不會讓視覺有改變。
感謝建議!
將 .ui-comment-app .ui-comment-button-container.comment 的背景設為透明,解決原本 active 和 hover 會有白色角落的狀況。
PS. 抱歉上個回應沒有敘述清楚。前則回應當中的圖片是 active 的狀況(我那時沒有注意到 hover 會有同樣的問題)。