H萌娘:讨论版导航/talkPage.css

/*主导航板块包覆*/
.DB-MainContentWrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 1720px;
    margin: 1em auto;
    border-left: 15px solid #E6B800;
    border-right: 15px solid #E6B800;
    background-color:#f8f9fa;
    color: #222;
    text-align:center;
    vertical-align: middle;
    line-height: 1.25;
}
.DB-MainContentWrapper>.DB-MainContentInnerWrapper {
    width: 100%;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: #a2a9b1;
}
/*通用内容div*/
.DB-contentDiv {
    border-width: 0 1px 1px 0; 
    border-style: solid; 
    border-color: #a2a9b1;
}
/*标题区*/
.DB-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.DB-header>div {
    flex: 0 0 420px;
}
.DB-SubtitleText {
    display: inline-block;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: middle;
}
.DB-SubtitleText::after {
    content:"——";
    margin-left: 0.5em;
}
#watchTalkPages {
    font-size: 0.9em;
    vertical-align: middle;
    margin-left: 0.5em;
}
/*FlexBox 菜单区*/
.DB-flexMenu {
    display: flex;
    flex-wrap: wrap;
}
.DB-flexMenu>div {
    flex: 1 0 100px;
    padding: 5px;
}
.DB-flexMenu>.quarterDivision {
    flex: 0 0 0;
    height: 0;
    padding: 0;
}
.DB-flexMenu>div .titleText {
    font-size: 1.5em;
    font-weight: bold;
}
.DB-flexMenu>div .descriptionText {
    font-size: 0.9em;
}
.DB-flexMenu>div .actionText {
    font-size: 0.8em;
}
.hover-note-fallback {
    display:none;
}
.mw-ui-button{
line-height: 1.1;
}
/*公告和议题子板块*/
#talkPageTop_list {
    max-width: 850px; 
    /*margin: 10px 0; defined inline to ensure high precedence*/
    padding: 10px 0;
    border-width: 1px 0;
    border-style: solid;
    border-color: #a2a9b1;
}
/*脚注*/
.DB-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 850px;
}
.DB-warning {
    flex-basis: 320px;
}
.DB-notice {
    flex: 1 0 420px;
    font-size: 0.75em;
    line-height: 1.5;
}
/*flex*/
#talkPageTop {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

#talkPageTop_left {
    flex: none;
    order: 1;
    margin: -1px 1em 1em -1px;
}

#talkPageTop_right {
    flex: none;
    order: 3;
    margin: -1px -1px 1em 1em;
}

#talkPageTop_middle {
    flex: auto;
    order: 2;
    max-width: 100%;
}

#talkPageTop_middle_top {
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}

#talkPageTop_middle_middle {
    display: flex;
    justify-content: space-around;
    text-align: left;
    max-width: 100%;
}

#talkPageTop_middle_bottom {
    text-align: center;
}

#talkPageTop_saves {
    padding-left: .5em;
    font-size: 14px;
    background-color: #E0EDFA;
    border: 1px solid #DFDFDF;
}

#talkPageTop_list {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

#talkPageTop_list_left,
#talkPageTop_list_right {
    width: 50%;
    padding: 0 7px;
}

#talkPageTop_list_right {
    border-left: 1px solid #a2a9b1;
}

@media screen and (max-width: 720px) {
    #talkPageTop {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    #talkPageTop_left {
        margin: 0;
    }

    #talkPageTop_right {
        order: 2;
        margin: 0;
    }

    #talkPageTop_middle {
        order: 3;
    }

    #talkPageTop_list,
    #talkPageTop_middle_middle {
        margin: auto;
        display: block;
    }

    #talkPageTop_list_left,
    #talkPageTop_list_right {
        width: auto;
    }

    #talkPageTop_list_right {
        border-left-width: 0;
    }
}

@media screen and (min-width: 721px) {

    #talkPageTop_middle_middle,
    #talkPageTop_list {
        width: auto !important;
    }
}

@media screen and (min-width: 721px) and (max-width:1280px) {
    #talkPageTop {
        flex-wrap: wrap;
    }

    #talkPageTop_left {
        margin: 0;
        width: 50%;
    }

    #talkPageTop_left>* {
        margin-right: auto;
    }

    #talkPageTop_right {
        width: 50%;
        order: 2;
        margin: 0;
    }

    #talkPageTop_right>* {
        margin-left: auto;
    }

    #talkPageTop_middle {
        order: 3;
    }
}

/*移动端适配*/
/*小屏幕上字小些*/
@media all and (max-width:600px), (max-height:480px) {
    .DB-flexMenu>div .titleText {
        font-size: 1.2em;
    }
}
@media all and (max-width: 1160px) {
    .DB-header>div {
        flex: 0 1 850px;
    }
    .DB-SubtitleDiv {
        text-align: center;
        margin-top: 3px;
        padding-top: 7px;
        border-top: 1px solid #a2a9b1;
    }
    .DB-footer {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .DB-footer>div {
        flex: none;
    }
}
/*    公告和议题子板块换行时加边界*/
@media screen and (max-width:720px) {
    #talkPageTop_list_right {
        border-top: 1px solid #a2a9b1;
        margin-top: 5px;
        padding-top: 5px !important;
    }
}
/*    窄屏：更窄的色带+flex强制换行*/
@media all and (max-width:600px) {
    .DB-MainContentWrapper {
        border-left: 8px solid #E6B800;
        border-right: 8px solid #E6B800;
    }
    .DB-flexMenu>.quarterDivision {
        flex: 0 0 100%;
        height :0;
        padding: 0;
    }
}
/*    搜索按钮换行时加一点留白*/
@media all and (max-width:566px) {/*There is probably a better way...*/
    .DB-contentDiv .searchboxInput {
        margin-bottom: 5px;
    }
    .DB-SubtitleText::after {
        content:"";
        margin-right: 0;
    }
}
/*    一键关注按钮快要换行的时候强制换行；调整格式*/
@media all and (max-width:500px) {
    #watchTalkPages {
        display: block;
        /*width: fit-content; not supported by TS, will use inline. Basically "Fuck you, Internet Explorer"; sad. */
        margin: 5px auto 0 auto;
    }
}
/*    超窄屏：flex强制逐项换行+字再小一点*/
@media screen and (max-width:370px) {
    .DB-flexMenu>div {
        flex: 0 1 370px;
    }
    .DB-flexMenu>div .descriptionText {
        font-size: 0.8em;
    }
}
/*无悬浮时隐藏悬浮提示，显示fallback*/
@media (hover:none) {
    .hover-note {
        display: none;
    }
    .hover-note-fallback {
        display: initial;
    }
}
/*打印效果*/
@media print {
  .DB-MainContentWrapper a[href]:after {
    content: none !important;
  }
}