Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: border-radius of comment-app #7

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

Rockpelt
Copy link

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

修改前:
image

修改後:
image

modify the border-radius for containers in comment-app into 4px
@titangene
Copy link
Owner

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

Modify the border-radius as the maintainer suggests.
Fix the boarder-radius of ui-comment-button-container into 6px
@Rockpelt
Copy link
Author

Rockpelt commented Nov 3, 2020

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

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

修改前:
image

修改後:
image

@titangene
Copy link
Owner

titangene commented Nov 3, 2020

感謝修正!

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

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

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

Set the background-color of .ui-comment-button-container.comment into transparent, to fix the behavior happening upon hover and active.
Add the parent of open-comments in the selector.
@Rockpelt
Copy link
Author

Rockpelt commented Nov 3, 2020

感謝建議!

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants