新しいCSSのborder-radiusとpaddingに関するフィードバック

Discourse を最新バージョンにアップデートしたところ、新しい CSS の境界線の丸み処理、特にヘッダーが暗いサイトで問題が発生しています。

以下は、ヘッダーが暗いサイトでのスクリーンショットで、要素がうまく組み合わなくなっています。

暗いヘッダーでの丸み処理の問題

こちらは、このフォーラムで赤色の CSS 境界線を追加して見やすくしたものです。

このフォーラムでの同じ問題

こちらは、まだアップデートされていないフォーラムでの表示です。丸みが少なく、以前のパディング(角が直線に接する部分の丸みがない)の方が全体的に見栄えが良いと思います。

全体的に、丸みが少ない方が見栄えが良いと思います。別の例を挙げます。

比較のために古いバージョンを示します(私の意見ではこちらの方が良いですが、外側の角は 2px の丸み処理の方が良いかもしれません)。

いくつか提案です。

「いいね!」 5

ご指摘ありがとうございます。デザインチームに通知しました。

「いいね!」 3

投稿から更新された部分があります。

サイドバーの項目に少し間隔を設けました。

通知パネルのパディングを削除しました。デザインチームは、すべての要素の周りにパディングを設けるよりも、この方が良いと考えています。

この角には丸みがかかってはいけません。修正します。ご報告ありがとうございます。

「いいね!」 1

これは単なるフィードバックです。自分のフォーラムで簡単に変更できるはずなので。
パディングがないのは問題ありません。私だけかもしれませんが、メニューをクリックするたびに、脳が「何かが正しくないように見える」と言います。パディングよりもボーダー半径の問題だと思います。ユーザーアイコンを囲むボックスには 4px の半径があるように見えますが、メニューには 2 * 4px の半径があります。サイドバーのボタンも 4px です。メニューの境界線が 4px であれば、ページ全体と一致して見栄えが良くなると思います。

(あなたのスクリーンショットではすべて 8px のようですが、丸すぎると感じます。私の勘違いでなければ、ログアウトすると 8px の半径が見えますが、ログインすると 4px の半径が見えます。いくつかのブラウザで試しました。)


編集: 私たちは違うものを見ているのかもしれません。大きな問題ではありません。変数をオーバーライドできるからです。しかし、サイトでクリックするたびに、左上の角が奇妙に見えます。おそらく、より大きな丸みによってエッジがテキストに近すぎるため、前のコメントでパディングについて言及したのだと思います。

「いいね!」 1