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> |