hackmd-dark-theme icon indicating copy to clipboard operation
hackmd-dark-theme copied to clipboard

fix: border-radius of comment-app

Open Rockpelt opened this issue 5 years ago • 4 comments

將留言區塊改為圓角方形,消除原本的白色角落。

修改前: image

修改後: image

Rockpelt avatar Oct 26 '20 09:10 Rockpelt

感謝發 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;
}

titangene avatar Nov 02 '20 05:11 titangene

感謝修改建議!將相關段落照您的建議修改,並且將其移至程式碼處理 comment 部分的區段。

另外一併修改在 ui-comment-button-containerborder-radius,使其與預設 stylesheets 當中的 ui-comment-container 一致。

修改前: image

修改後: image

Rockpelt avatar Nov 03 '20 08:11 Rockpelt

感謝修正!

你指的 .ui-comment-button-container 主要是在解決 hover 會有白色角落嗎?

.ui-comment-app .ui-comment-button-container.comment:not(.active):hover {
  z-index: 1050;
  background-color: white;
}

我會傾向將背景色設為透明,因為在原主題 hover 後變為白色背景也不會讓視覺有改變。

titangene avatar Nov 03 '20 15:11 titangene

感謝建議!

.ui-comment-app .ui-comment-button-container.comment 的背景設為透明,解決原本 active 和 hover 會有白色角落的狀況。

PS. 抱歉上個回應沒有敘述清楚。前則回應當中的圖片是 active 的狀況(我那時沒有注意到 hover 會有同樣的問題)。

Rockpelt avatar Nov 03 '20 17:11 Rockpelt