Discourseのすべての入力フィールドを丸める方法

danielabc · 2024 年 1 月 29 日午前 1:45

CSSで一括で丸めるにはどうすればよいですか？

chapoi · 2024 年 1 月 29 日午前 11:07

ほとんどの（通常の）入力に適用できる変数があります。

var(--d-input-border-radius);

したがって、この変数をCSSのルートに好きな値で設定します。

:root {
--d-input-border-radius: 20px;
}

手動で調整する必要がある場合もありますが、これは良い出発点になるはずです。

danielabc · 2024 年 1 月 31 日午前 6:48

ありがとうございます。フォーラムの Discourse 変数はどこで確認できますか？

chapoi · 2024 年 1 月 31 日午前 7:10

Discourse のコアコードでは、オーバーライドできるカスタムプロパティは次のファイルにあります。

github.com/discourse/discourse

app/assets/stylesheets/common/foundation/base.scss

main

// These CSS custom properties are added here instead of in variables.scss
// because variables.scss is injected into every theme CSS file
// which causes problems when overriding custom properties in themes
:root {
  --topic-body-width: #{$topic-body-width};
  --topic-body-width-padding: var(--space-3);
  --topic-avatar-width: #{$topic-avatar-width};
  --d-border-radius: 4px;
  --d-border-radius-large: calc(var(--d-border-radius) * 2);
  --d-nav-pill-border-radius: var(--d-border-radius);
  --d-input-border-radius: var(--d-border-radius);
  --d-content-background: initial;

  // used for padding & margin
  --space: 0.25rem; // 4px
  --space-half: calc(var(--space) / 2); // 2px
  --space-1: var(--space); // 4px
  --space-2: calc(var(--space) * 2);
  --space-3: calc(var(--space) * 3);
  --space-4: calc(var(--space) * 4);

This file has been truncated. show original

これらをオーバーライドするには、次のようにテーマのルートに追加できます。

danielabc · 2024 年 1 月 31 日午後 4:41

どうもありがとう

トピック		返信	表示
All border-radius from chat are being removed UX chat , completed	3	207	2024 年 2 月 2 日
Rounded login buttons Support	2	56	2024 年 10 月 12 日
How to make forum buttons rounded across all themes Support	16	346	2024 年 8 月 18 日
Mixins default focus question Support	5	654	2021 年 3 月 6 日
Buttons rounded edges Support	3	1481	2018 年 11 月 14 日

Discourseのすべての入力フィールドを丸める方法

関連トピック