「Widget:主题板块导航」與「Widget:欢迎」：頁面間的差異

出自H萌娘
(頁面間的差異)
跳至導覽 跳至搜尋
imported>=海豚=
無編輯摘要
 
imported>=海豚=
無編輯摘要
 
第1行： 第1行：
<noinclude><pre>
<noinclude><nowiki>QvQ</nowiki></noinclude><includeonly><!--{if !isset($wgMainpage) || !$wgMainpage}--><!--{assign var="wgMainpage" value=true scope="global"}--><style type="text/css">
/*
@media (min-width: 1480px) {
Wiki2021 Interface
   .mainpage {
Contributors: P.T.Đ/=海豚=
     width: 1404px;
Year: 2021
     margin: 0 auto;
*/
   }
</pre></noinclude><includeonly>
   .mainpage-container,
<style type="text/css">
   .mainpage-column {
/* default layout */
     display: flex;
.main-body {
     flex-wrap: nowrap;
display: flex;
     justify-content: space-around;
flex-flow: wrap column;
     align-content: stretch;
     align-items: stretch;
   }
   .mainpage-column {
     flex-direction: column;
   }
}
}
 
@media (min-width: 1640px) {
/** fix bug zooming **/
   .mainpage {
.main-body > div {
     width: 1680px;
max-width: 100%;
   }
}
}
 
@media (max-width: 1480px) {
.main-box {
   .mainpage,
   margin-bottom: 1.5rem;
   .mainpage-column-left,
    min-height: 93%;
   .mainpage-column-right {
     max-width: 1360px;
    }
}
}
 
.mainpage,
/* responsive layout */
.mainpage * {
@media (min-width: 992px) {
   box-sizing: border-box;
.main-body {
   transition: all .37s;
flex-direction: row;
   margin: 0 -0.5rem;
}
.main-body__left,
.main-body__right {
flex: 1;
}
}
}
 
.mainpage {
/* tweaks WikimediaUI */
   /*background: url(./zhMoegirl15.2.png) no-repeat center center;*/
.mw-headline-number {
    background-size: contain;
    display: none;
}
}
 
.mainpage-order-one {
.main-header__right .mw-ui-quiet {
   order: 1;
padding: 6px 8px;
}
}
 
.mainpage-order-two {
.main-header__right .mw-ui-quiet:hover,
   order: 2;
.main-header__right .mw-ui-quiet:focus,
.main-box__title a:hover,
.main-box__title a:focus,
.main-box-dropdown__content > ul > li > a:hover,
.main-box-dropdown__content > ul > li > a:focus {
color: #0645ad;
}
}
 
.mainpage-order-three {
/* utils */
   order: 3;
.u-display-inline-block {
display: inline-block;
}
}
 
.mainpage-order-four {
.u-font-size-larger {
   order: 4;
font-size: 1.35em;
}
}
 
.mainpage-order-five {
.u-text-align-center {
   order: 5;
text-align: center;
}
}
 
.mainpage-order-six {
.u-plain-list > ul,
    order: 6;
.u-plain-list > ul > li {
    margin: 0;
   padding: 0;
   list-style: none;
}
}
 
.mainpage-order-seven {
.u-horizontal-list > ul {
   order: 7;
display: inline;
letter-spacing: -1em;
}
}
 
.mainpage-order-eight {
.u-horizontal-list > ul > li {
    order: 8;
display: inline;
    letter-spacing: normal;
}
}
 
.mainpage-order-nine {
.u-horizontal-list > ul li::after {
    order: 9;
    padding: 0 0.35em;
   content: "·";
   font-weight: bold;
}
}
 
.mainpage-flex-one {
.u-horizontal-list > ul li:last-child::after {
    flex: 1;
    padding: 0;
   content: "";
}
}
 
.mainpage-flex-two {
.u-plain-heading {
   flex: 2;
margin-top: 0;
padding-top: 0;
border-bottom-color: transparent;
}
}
 
.mainpage-flex-three {
/* others */
   flex: 3;
/** thumb in .main-box **/
.main-box__body > .show-image {
margin: 0.4em 0 0.4em 1em !important;
}
}
 
.mainpage-flex-four {
/** #main-suggestions **/
   flex: 4;
#main-suggestions {
padding-top: 0.5rem;
}
}
 
.mainpage-flex-five {
#main-suggestions .floatright {
    flex: 5;
   margin-top: -2.75em;
    position: relative;
}
}
 
.mainpage-flex-six {
#main-suggestions .main-box__title {
   flex: 6;
border-bottom: 1px dotted #e0e0e0;
}
}
 
.mainpage-flex-seven {
/** did-you-know box **/
    flex: 7;
.subTextDYK {
    padding: 0.4em 1.6em 0;
color: #aaa;
}
}
 
.mainpage-flex-eight {
/* .content-improvement-box */
    flex: 8;
.content-improvement-box {
display: flex;
    flex-flow: wrap column;
   margin: 0 -0.5rem;
}
}
 
.mainpage-flex-nine {
/* .content-improvement-problems */
    flex: 9;
.content-improvement-problems,
.content-improvement-invitation {
    margin: 0 0.5rem;
}
}
 
.mainpage-text-align-center {
.content-improvement-problems {
    text-align: center;
order: 2;
display: flex;
   flex-wrap: wrap;
   margin: -0.5rem 0;
    padding-top: 1rem;
}
}
 
.mainpage-headtitle,
.content-improvement-item {
.mainpage-column>* {
    flex: 1 2 auto;
    margin: .5em;
    padding: 0.5rem;
    padding: .5em;
width: 100%;
   box-shadow: 1px 1px 1px 1px #ededde;
}
}
 
.mainpage-headtitle:hover, .mainpage-column>*:hover {
/** .content-improvement-item color modifier **/
    box-shadow: 1px 1px 6px 3px #ededde;
.content-improvement-item.-color-red > a {
   margin: .5em .4em;
    border-bottom: 5px solid #dd3333;
}
}
 
.mainpage-column>*:hover {
.content-improvement-item.-color-red > a:hover,
    background-color: #FFF;
.content-improvement-item.-color-red > a:focus {
    background-color: #dd3333;
}
}
 
.mainpage-headtitle {
.content-improvement-item.-color-blue > a {
   font-size: 1.8em;
    border-bottom: 5px solid #36c;
    text-align: center;
}
}
 
.mainpage .mainpage-column h2 {
.content-improvement-item.-color-blue > a:hover,
   margin-top: 0;
.content-improvement-item.-color-blue > a:focus {
   border-width: 0;
    background-color: #36c;
   padding-left: .5em;
   color: #8b8b22;
   font-family: EasonPro, "黑体", serif;
   font-size-adjust: .43;
   font-weight: 400;
    border-left: 1em #ededde solid;
}
}
 
.mainpage .mainpage-column h3 {
.content-improvement-item.-color-green > a {
    padding-left: .5em;
    border-bottom: 5px solid #00af89;
}
}
 
.mainpage .mw-headline-number {
.content-improvement-item.-color-green > a:hover,
    display: none;
.content-improvement-item.-color-green > a:focus {
    background-color: #00af89;
}
}
 
.mainpage .mainpage-column p {
.content-improvement-item.-color-gray > a {
    padding-left: .5em;
    border-bottom: 5px solid #a2a9b1;
}
}
 
.mainpage .mainpage-column p {
.content-improvement-item.-color-gray > a:hover,
    text-indent: 2em;
.content-improvement-item.-color-gray > a:focus {
    background-color: #a2a9b1;
}
}
 
.mainpage-banner-page,
/** .content-improvement-item icon modifier **/
.mainpage-page {
.content-improvement-item.-icon-editUndo > a::before {
    position: relative;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/c/c5/OOjs_UI_icon_editUndo-ltr.svg);
}
}
 
.mainpage-banner-page .mainpage-page-img {
.content-improvement-item.-icon-tableMergeCells > a::before {
   height: 231px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/6/64/OOjs_UI_icon_table-merge-cells.svg);
    width: auto;
}
}
 
.mainpage-banner {
.content-improvement-item.-icon-searchCaseSensitive > a::before {
   height: 250px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/e/e5/OOjs_UI_icon_searchCaseSensitive.svg);
   position: relative;
    overflow: hidden;
}
}
 
.mainpage-banner-control {
.content-improvement-item.-icon-alert > a::before {
   position: absolute;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg);
   bottom: 1em;
   right: 1em;
    z-index: 7;
}
}
 
.mainpage-banner-control-triggle {
.content-improvement-item.-icon-tag > a::before {
   width: 18px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/d/dd/OOjs_UI_icon_tag-ltr.svg);
   height: 18px;
   border-radius: 18px;
   background-color: white;
    display: inline-block;
   cursor: pointer;
   border: 3px rgba(139, 139, 34, .5) solid;
   margin-left: 8px;
}
}
 
.mainpage-banner-control-triggle.on {
.content-improvement-item.-icon-language > a::before {
   border-color: white;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/4/43/OOjs_UI_icon_language-ltr.svg);
    background-color: rgba(139, 139, 34, .5);
}
}
 
.mainpage-banner-page {
.content-improvement-item.-icon-link > a::before {
   text-align: center;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/7/72/OOjs_UI_icon_link-ltr.svg);
    float: left;
}
}
 
.mainpage-counter {
.content-improvement-item.-icon-history > a::before {
    background: url(https://www.hmoegirl.com/images/thumb/7/7a/64304271.png/689px-64304271.png) top right;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/2/27/OOjs_UI_icon_history.svg);
   background-repeat: no-repeat;
   background-size: 319px 280px;
   min-height: 250px;
   padding: 0!important;
   display: flex;
}
}
 
.mainpage-counter-container {
.content-improvement-item.-icon-code > a::before {
    background: rgba(255, 255, 255, .73);
    background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cd/OOjs_UI_icon_code.svg);
   padding: .5em;
   flex: 1;
}
}
 
.mainpage-ads {
.content-improvement-item.-icon-reference > a::before {
   height: 410px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/9/9c/OOjs_UI_icon_reference.svg);
    overflow: auto;
}
}
 
.mainpage-page-img {
.content-improvement-item.-icon-balance-scale > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/9/90/Font_Awesome_5_solid_balance-scale.svg);
}
 
.content-improvement-item.-icon-help > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b2/OOjs_UI_icon_help-ltr.svg);
}
 
.content-improvement-item.-icon-add > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/0/06/OOjs_UI_icon_add.svg);
}
 
.content-improvement-item.-icon-halfBright > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_halfBright.svg);
}
 
.content-improvement-item.-icon-articleSearch > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/8/86/OOjs_UI_icon_articleSearch-ltr.svg);
}
 
.content-improvement-item.-icon-eye > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/c/cf/OOjs_UI_icon_eye.svg);
}
 
.content-improvement-item.-icon-block > a::before {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/a/a1/OOjs_UI_icon_block.svg);
}
 
/** .content-improvement-item > a **/
.content-improvement-item > a {
   box-sizing: border-box;
   position: relative;
   z-index: 0;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   overflow: hidden;
   padding: 0.5rem 1rem 1rem;
    width: 100%;
    width: 100%;
   height: 100%;
   color: inherit;
   background: #f7f7f7;
   text-decoration: none;
   transition: color .1s ease-in-out, background .1s ease-in-out, box-shadow .1s ease-in-out, opacity .1s ease-in-out;
}
}
 
.mainpage-page-intro {
.content-improvement-item > a:hover,
.content-improvement-item > a:focus {
   color: #fff;
   box-shadow: 0 2px 5px #ccc;
}
 
.content-improvement-item > a:active {
   opacity: 0.7;
   box-shadow: 0 4px 7px #ccc;
}
 
.content-improvement-item > a::before {
   content: "";
    position: absolute;
    position: absolute;
    z-index: -1;
    bottom: 0;
    top: 50%;
    left: 0;
    right: 0.75rem;
    margin: 0!important;
    transform: translateY(-50%);
   padding: .5em;
    background-color: rgba(255, 255, 255, 0.73);
    width: 100%;
    width: 100%;
   height: 90%;
   background-size: contain;
   background-position: right;
   background-repeat: no-repeat;
   opacity: 0.03;
   transition: opacity .1s ease-in-out;
}
}
 
.mainpage-flex {
.content-improvement-item > a:hover::before,
    display: flex;
.content-improvement-item > a:focus::before {
    flex-wrap: nowrap;
   opacity: 0.08;
    justify-content: space-around;
}
    align-content: stretch;
 
.content-improvement-item > a > span {
    display: block;
    width: 100%;
}
 
.content-improvement-item > a > span:nth-child(2) {
white-space: nowrap;
    overflow: hidden;
   text-overflow: ellipsis;
}
 
.content-improvement-item__number {
   font-weight: bold;
   font-size: 1.8em;
    padding-right: 0.25em;
}
 
/* .content-improvement-invitation */
.content-improvement-invitation {
order: 1;
   padding: 1rem;
   background: #f7f7f7;
}
 
.content-improvement-invitation__icon {
   margin: 0 0 0.5em 0.75em;
   float: right;
   width: 5rem;
   height: 5rem;
   background-image: url(//upload.wikimedia.org/wikipedia/commons/b/bd/Wikipedia-logo-v2-bw.svg);
   background-size: 5rem;
   background-position: center;
   background-repeat: no-repeat;
}
}
 
.mainpage-flex-no {
.content-improvement-invitation__title {
    flex: none;
    font-weight: bold;
   font-size: 1.1em;
}
}
 
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
.content-improvement-invitation__content p:last-child {
   margin: 0.3em 0 0 1.6em;
margin-bottom: 0;
   padding-top: 0.5em;
   font-size: 97%;
}
}
 
.mainpage-DYK {
.content-improvement-invitation__button {
font-size: 96.5%;
padding: 0.75rem 0 0.45rem;
}
}
 
.mainpage-welcomenews {
/* responsive */
   font-size: 112%;
@media (min-width: 768px) {
/* .content-improvement-problems */
.content-improvement-item {
width: 40%;
}
}
}
 
.mainpage-mgsisters {
@media (min-width: 992px) {
   color: #777;
/* .content-improvement-box */
   font-size: 115%;
.content-improvement-box {
flex-direction: row;
}
/* .content-improvement-problems */
.content-improvement-problems {
flex: 2;
order: 1;
   padding-top: 0;
}
 
/* .content-improvement-invitation */
.content-improvement-invitation {
flex: 1;
order: 2;
}
}
}
 
.mainpage-mgsisters-container {
@media (min-width: 1200px) {
   margin: 1em 0;
/* .content-improvement-problems */
.content-improvement-item {
width: 30%;
}
}
}
 
.mainpage-mgsisters-img {
/* local fixed */
    width: 50px;
#localNotice {
    display: none;
}
}
#catlinks {
.mainpage-mgsisters-img img {
   display: none;
    height: 50px;
}
    width: auto;
.firstHeading {
   display: none;
}
.comment-replybox {
    display: none;
}
#flowthread {
    display: none;
}
}
#siteSub {
.mainpage-mgsisters-text {
    display: none!important;
    font-size: 85%;
}
}
</style>
</style>
<script>
window.RLQ.push(function() {
   window.RLQ = window.RLQ || [];
   $(function() {
     $(window).on('resize', function() {
       $('.mainpage-banner-page').width($('.mainpage-banner').width());
     }).resize();
     var marginLeft = $('.mainpage').offset().left - $('.mainpage').parent().offset().left;
     /* $('.mainpage').css('margin-left', marginLeft - (marginLeft - (($(window).width() - $('.mainpage').width()) / 2 - $('.mainpage').parent().offset().left)) / 2 + 'px'); // 计算合理的偏差，其中【($(window).width() - $('.mainpage').width()) / 2】用以计算主体居中时的实际offsetLeft值，减去父元素offset即是主体margin-left值，再用【marginLeft - (marginLeft - 主体margin-left值 / 2】来计算缓和后的margin-left值 */
     var length = $('.mainpage-banner-page').length;
     if (!length) return;
     $('.mainpage-banner-container').width(length + '00%');
     while (length--) $('.mainpage-banner-control').append('<span class="mainpage-banner-control-triggle"></span>');
     var bannerCount = 25;
     $('.mainpage-banner-control-triggle').on('click', function() {
       bannerCount = 25;
       $(this).addClass('on').siblings().removeClass('on');
       var index = $(this).parent().children().index(this);
       var target = $('.mainpage-banner-page').eq(index);
       var left = target.prevAll().length || 0;
       if (left) $('.mainpage-banner-container').css('margin-left', '-' + left + '00%');
       else $('.mainpage-banner-container').css('margin-left', '0');
     }).first().click();
     setInterval(function() {
       if (bannerCount-- > 0) return;
       var next = $('.mainpage-banner-control-triggle.on').next();
       if (!next.length) next = $('.mainpage-banner-control-triggle:first');
       next.click();
     }, 200);
   });
});
</script><!--{/if}--></includeonly>

於 2020年5月4日 (一) 09:51 的修訂

QvQ

取自 "https://hmoegirl.com/index.php?title=Widget:主题板块导航&oldid=59204"