새로운 기본 내비게이션 스타일과 간소화된 색상 스킴

[awesomerobot (Kris)]

변경 사항

곧 “상단 메뉴” 및 유사한 스타일의 내비게이션(때로는 네비 필이라고도 함)은 Discourse 전체에서 업데이트되고 일관성 있는 스타일을 갖추게 될 것입니다.

상단 메뉴

변경 전:

변경 후:

프로필 메뉴

변경 전:

변경 후:

왜 변경되는가?

이를 통해 기본 CSS를 단순화하고 기본 Discourse 테마에서 “quaternary” 색상의 사용을 제거할 수 있습니다. 이 색상은 수년 동안 많은 테마에서 사용되어 왔으므로, 커스텀 CSS에서 사용할 수 있도록 계속 유지될 것입니다.

기본적으로 "danger red"와 매우 유사한 이 색상의 사용은 활성 필터를 강조 표시하는 등의 작업을 어렵게 만들었습니다. …왜냐하면 이 상태에서는 오류처럼 보이기 때문입니다:

변경 전:

변경 후:

테마에서 이 부분을 어떻게 변경합니까?

이 업데이트와 함께, CSS 커스텀 프로퍼티를 사용하여 테마에서 이러한 내비게이션 색상을 변경하는 것이 더 쉬워졌습니다. 새로운 변수가 몇 가지 있습니다:

:root {
  --d-nav-color: var(--primary);
  --d-nav-bg-color: transparent;
  --d-nav-color--hover: var(--primary);
  --d-nav-bg-color--hover: var(--d-hover);
  --d-nav-color--active: var(--tertiary);
  --d-nav-bg-color--active: transparent;
  --d-nav-border-color--active: var(--d-nav-color--active);
  --d-nav-underline-height: 0.125em;
}

따라서 각 내비게이션 인스턴스를 변경하기 위해 여러 세트의 커스텀 CSS를 추가하는 대신, 필요에 따라 변수를 변경할 수 있습니다. 예를 들어:

:root {
  --d-nav-color--active: mediumorchid;
}

이 CSS를 적용하면 다음과 같은 결과가 나타납니다:

이 밑줄은 어디에서 오는 것입니까?

활성 내비게이션 항목의 "밑줄"이 border-bottom CSS 프로퍼티를 사용하지 않는다는 것을 알아차릴 수 있습니다. 대신 ::after 가상 요소를 사용하여 적용됩니다.

기존 테마는 이미 border 프로퍼티를 사용 중일 수 있으므로, 이 방법은 기존 스타일과 충돌하는 경우 밑줄을 제거하는 것이 더 쉬울 것입니다. 제거하려면:

:root {
  --d-nav-underline-height: 0;
}

이전 스타일을 선호한다면?

새로운 CSS 변수를 사용하면 이를 되돌리는 것이 비교적 쉽습니다. 테마에서 다음을 적용할 수 있습니다:

:root {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-border-color--active: var(--primary-medium);
  --d-nav-underline-height: 0;
}

이 내비게이션의 인스턴스 중 하나만 변경하려는 경우, :root 대신 #navigation-bar와 같이 ID 또는 클래스로 변수 변경 범위를 지정할 수 있습니다:

#navigation-bar {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-underline-height: 0;
}

또 다른 예시:

.user-navigation {
  --d-nav-bg-color--active: lightcyan;
}

CSS를 변경하는 방법을 잘 모르겠다면 Making custom CSS changes on your site 을 확인해 보세요.

지금으로서는 여기까지입니다! 항상 그렇듯이, 질문이 있거나 문제를 겪는 경우 알려 주세요.

[Arkshine]

좋아요! 현대적이고 시각적으로 덜 거슬리며, 게다가 CSS도 단순해졌네요. 잘하셨어요!

[nobrowser (Ian Zimmerman)]

예시에서 "구버전"과 "신버전"의 차이는 색상만이 아닙니다. “신버전” 예시에서 글꼴 크기가 더 작아 보입니다. 의도된 것인지, 실수인지요?

기본 글꼴 크기에 대한 변경이 이미 너무 많았다고 느낍니다

[Firepup650 (Firepup Sixfifty)]

크기는 나한테는 차이가 없어 보이는데, 어떤 이미지에서 차이가 나는지 알려줄 수 있을까?

[NateDhaliwal]

이것인 것 같습니다 (ask.replit.com에서 가져옴):

텍스트가 더 작아 보입니다.

[dsims (Daniel)]

@nobrowser

글자 크기가 더 작아 보입니다

@NateDhaliwal

텍스트가 더 작아진 것 같습니다.

--font-up-1 폰트 크기가 제거되면서 이 라인에서 폰트 크기가 변경된 것으로 보입니다. 이로 인해 이제 기본값으로 --base-font-size가 적용됩니다. 그리고 모바일 드롭다운 내비게이션의 경우, --font-up-1 없이 --font-down-1이 여전히 적용되고 있습니다.

이전 스타일:

.nav-pills {
  > li {
    > a,
    button {
      font-size: var(--font-up-1);

[Moin]

저도 그걸 알아챘어요. 카테고리 및 태그 드롭다운의 글꼴 크기가 옆에 있는 "최신"보다 더 커요. 그리고 사이드바를 숨기지 않을 때 "최신"은 고정된 주제의 발췌문보다도 더 작게 표시돼요.

[awesomerobot (Kris)]

네, font-size 조정은 의도적인 것이었습니다 (간격도 약간 조정되었습니다). 전체 font-size를 키우자 필터를 포함한 모든 요소가 함께 커졌지만, 이제 드롭다운, 필터, 새 주제 버튼의 텍스트 크기가 모두 동일해졌습니다.

텍스트를 다시 크게 표시하고 싶으시다면 CSS를 추가할 수 있습니다…

네비게이션의 모든 요소 (드롭다운, 필터, 버튼):

.navigation-container {
 font-size: var(--font-up-1);
}

필터만 적용할 경우:

#navigation-bar {
 font-size: var(--font-up-1);
}

@nobrowser

기본 글꼴 크기에 이미 너무 많은 변경이 있었다고 느낍니다

특정 문제나 제안 사항이 있으시면 알려주세요. 도와드리겠습니다!