토픽 푸터 버튼 순서 변경

개발
1

안녕하세요,

토픽 푸터 버튼의 순서를 변경하고 싶습니다. 관련 플러그인을 찾지 못했고, CSS로 해결하는 것도 쉽지 않아 보였습니다.

아래와 같은 모양으로 만들고 싶습니다:

image
image797×113 2.28 KB

혹시 아이디어가 있으신 분이 계신가요? 부탁드립니다.

2

안녕하세요,

이 CSS를 시도해 보시겠어요?

기본 알림 텍스트를 숨기고 싶다고 가정하고 작성했습니다.
기본 테마를 기반으로 하고 있어요. 조정이 필요하면 알려주세요!

#topic-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    button.create { order: -4; }
    button.bookmark { order: -3; }
    button.share-and-invite { order: -2; }
    button.flag-topic { order: -1; }
    
    .topic-notifications-button {
        margin-block: 0;
        
        .reason  {
            margin-top: 0;
            
            .text {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 924px) {
    html.desktop-view #topic-footer-buttons .topic-notifications-button {
        margin-top: 1em;
    }
}
3

완벽하네요, 작동합니다! 감사합니다! :pray: