“MediaWiki:Mobile.css”与“Template:Related pages”：页面之间的差异

H萌娘，万物皆可H的百科全书！
（页面间差异）
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
 
imported>=海豚=
无编辑摘要
 
第1行： 第1行：
/* 放置于这里的CSS将影响使用移动版网站的用户 */
<includeonly><templatestyles src="Related pages/Related pages.css" />
/* 链接样式 */
<div class="nomobile" style="display: flex; flex-wrap: wrap; column-gap: 2rem;transform:translateX(-2%)translateY(5%);margin-bottom: -15px;">
a:hover {
{{hovers}}
text-decoration: none;
<div class="hovers-fade-shallow">
}
[[{{{url1}}}|
a, a:visited {
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
   text-decoration: none;
    <div id="picture-box">
   color: #3366cc;
    <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
}
    </div>
/* 社群推荐背景样式 */
   <div id="text-box">
#mp-banner {
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div>
   background-image: url(https://www.hmoegirl.com/images/0/09/80468767.jpg);
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div>
}
    </div>
/* 黑幕 */
  </div>
.heimu,
</div>
.heimu a,
]]
a .heimu,
<div class="hovers-fade-shallow">
.heimu a.new {
[[{{{url2}}}|
   background-color: #252525;
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
   color: #252525;
   <div id="picture-box">
   text-shadow: none;
    <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
}
   </div>
.heimu:hover,
   <div id="text-box">
.heimu:active,
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div>
.heimu:hover .heimu,
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div>
.heimu:active .heimu {
   </div>
    color: white !important;
   </div>
}
</div>
.heimu:hover a,
]]
a:hover .heimu,
<div class="hovers-fade-shallow">
.heimu:active a,
[[{{{url3}}}|
a:active .heimu {
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
    color: lightblue !important;
    <div id="picture-box">
}
    <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
.heimu:hover .new,
   </div>
.heimu .new:hover,
    <div id="text-box">
.new:hover .heimu,
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div>
.heimu:active .new,
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div>
.heimu .new:active,
    </div>
.new:active .heimu {
  </div>
   color: #BA0000 !important;
</div>
}
]]
/* 目录样式 */
</div>
.client-js .toc-mobile {
<div  class="mobileonly">
   background-color: #F5F5F5 !important;
{{hovers}}
   border: solid 0px transparent !important;
[[{{{url1}}}|
   border-left: 4px solid #f4c430 !important;
<div class="hovers-fade-shallow">
}
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color1}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
/* 页顶提示模板相关 */
   <div id="picture-box">
#commonBoxInfo {
    <img src="{{#if:{{{picture1}}}|{{{picture1}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
   color: #f00;
    </div>
   font-weight: bold;
   <div id="text-box">
   text-align: center;
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text1}}}|22|38}}px;left: {{#if:{{{text1}}}|13|24}}px;color:black;width:190px;{{#if:{{{text1}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title1}}}|{{{title1}}}|{{#if:{{{text1}}}||{{{url1}}}}}}}</div>
}
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title1}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text1}}}</div>
#commonBoxList > .commonBoxButton {
    </div>
   display: inline-block;
  </div>
   border-bottom: 3px solid #000;
</div>
   width: 40px;
]]
   height: 40px;
[[{{{url2}}}|
   background: #fff 50% 50% no-repeat;
<div class="hovers-fade-shallow">
   background-size: contain;
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color2}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
   cursor: pointer;
    <div id="picture-box">
   transition: opacity .5s;
    <img src="{{#if:{{{picture2}}}|{{{picture2}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
}
    </div>
#commonBoxList.open > .commonBoxButton {
   <div id="text-box">
   opacity: .1;
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text2}}}|22|38}}px;left: {{#if:{{{text2}}}|13|24}}px;color:black;width:190px;{{#if:{{{text2}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title2}}}|{{{title2}}}|{{#if:{{{text2}}}||{{{url2}}}}}}}</div>
}
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title2}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text2}}}</div>
#commonBoxList.open > .commonBoxButton.current {
   </div>
   opacity: 1;
  </div>
}
</div>
.common-box {
]]
   padding: .2em .4em;
[[{{{url3}}}|
   border: 0.7px solid #ddd;
<div class="hovers-fade-shallow">
   -moz-border-radius: 10px;
  <div style="height: 100px;width: 310px;background-color: {{#if:{{{background-color3}}}|{{{background-color}}}|#ffffff}}dd;border-radius: 6px;box-shadow: #00000021 0px 0px 10px;z-index: 100;position:relative;overflow: hidden;cursor: pointer;">
    -webkit-border-radius: 10px;
   <div id="picture-box">
   -khtml-border-radius: 10px;
    <img src="{{#if:{{{picture3}}}|{{{picture3}}}|https://img.moegirl.org.cn/common/b/b7/Transparent_Akkarin.jpg}}" width="100%">
   -o-border-radius: 10px;
   </div>
   border-radius: 10px;
   <div id="text-box">
   background: rgba(250,250,250,0.65)!important;
    <div style="line-height:17px;font-size: 1em;position: absolute;top: {{#if:{{{text3}}}|22|38}}px;left: {{#if:{{{text3}}}|13|24}}px;color:black;width:190px;{{#if:{{{text3}}}|transform: scale(0.93,0.93)|transform: scale(1,1)}}">{{#if:{{{title3}}}|{{{title3}}}|{{#if:{{{text3}}}||{{{url3}}}}}}}</div>
}
    <div style="overflow: hidden;word-break:break-al;line-height: 14px;position: absolute;top:{{#if:{{{title3}}}|44|33}}px;left: 20px;font-size: 0.76em;width: 168px;opacity: 0.6;color:black">{{{text3}}}</div>
/* 修复子页面列表和common-box宽度不足 */
   </div>
.mw-prefixindex-list-table,
  </div>
.common-box {
</div>
   width: 100% !important;
]]
}
</div>
/* 编辑区样式 */
</includeonly>
.mw-editTools {
<noinclude>
   display: none!important;
代码：
}
<pre>
.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label{
{{相关页面
   display: none!important;
|url1= 萌百:心形眼
}
|picture1= https://commons.moegirl.org.cn/thumb.php?f=60e25f705c2305fec80ae8dbccef701e.jpg&width=125
/* info类模板 */
|title1= 心形眼
.infobox {
|text1=
  margin:0 auto;
|url2= 萌百:心形瞳孔
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.10);
|picture2= https://commons.moegirl.org.cn/thumb.php?f=%E5%BF%83%E5%BD%A2%E7%9E%B3%E5%AD%94.jpg&width=125
  border-radius: 5px;
|title2= 心形瞳孔
  overflow: hidden;
|text2=
  border: 0.5px solid #ddd;
|url3= 萌百:十字瞳孔
}
|picture3= https://commons.moegirl.org.cn/thumb.php?f=Nia_Teppelin.jpg&width=125
.infobox2 {
|title3= 十字瞳孔
  padding: 0.2em;
|text3=
  float: middle;
}}
  clear: middle;
</pre>
  border-radius: 4px;
 
  background: rgba(251,251,251);
效果：
}
{{相关页面
.infoBoxTitle {
|url1= 萌百:心形眼
   margin: 3px auto;
|picture1= https://commons.moegirl.org.cn/thumb.php?f=60e25f705c2305fec80ae8dbccef701e.jpg&width=125
   padding: 0;
|title1= 心形眼
   text-align: center;
|text1=
   font-weight: 700;
|url2= 萌百:心形瞳孔
}
|picture2= https://commons.moegirl.org.cn/thumb.php?f=%E5%BF%83%E5%BD%A2%E7%9E%B3%E5%AD%94.jpg&width=125
.infoBoxIcon {
|title2= 心形瞳孔
   display: table-cell;
|text2=
   padding: 2px 0 2px .5em;
|url3= 萌百:十字瞳孔
   vertical-align: middle;
|picture3= https://commons.moegirl.org.cn/thumb.php?f=Nia_Teppelin.jpg&width=125
}
|title3= 十字瞳孔
.infoBoxText {
|text3=
   display: table-cell;
}}
   padding: .25em .5em .25em 1.3em;
</noinclude>
   width: 100%;
   vertical-align: middle;
}
.infoBoxContent {
  padding: 0.6em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
   background: rgba(251,251,251);
}
.infoBoxBelow {
   margin: 0 auto;
   padding: 0;
   text-align: center;
}
/* 隐藏用户评论头像 */
.comment-avatar {
   display: none !important;
}
.comment-body {
   padding-left: 12px !important;
}
.comment-thread .comment-thread {
   margin-left: 35px !important;
}
.comment-thread > div:not(:first-child) .comment-body {
   padding-left: 0px !important;
}
.comment-body {
   padding-left: 7px !important;
    padding-right: 6px !important;
}
.comment-container{
border-bottom: 1px solid rgba(0,0,0,0.13);
   margin-bottom: 25px;
}
/* 隐藏无用按钮 */
#page-secondary-actions {
   display: none;
}
/* 编辑区样式 */
.my-buttons {
   padding: .5em;
}
.my-buttons a {
    text-decoration: none;
   border: 1px #069 outset;
   padding: .1em;
}
.my-buttons a:hover,
.my-buttons a:active {
   border-style: inset;
}
.ve-ui-mwSaveDialog-summaryLabel {
   display: none;
}
/* 表格优化 */
table.wraptable {
  white-space: normal;
}
.content table{
   display: table;
}
/* 修复单元格莫名空行 */
td {
   vertical-align: middle;
}
/* 修复子页面列表和common-box宽度不足 */
.mw-prefixindex-list-table,
.common-box {
   width: 100% !important;
}
/* 侧边栏和替换logo图片隐藏 */
#sidebar-character,
#wglogo {
   display: none;
}
/* 导航条 */
#breadcrumb {
   color: black;
   border: solid 1px rgb(204, 204, 204);
   width: 100%;
   overflow: hidden;
   margin: 0;
   padding: 0 0 .5em 0;
}
#breadcrumb span {
   list-style-type: none;
   float: left;
   padding-left: 10px;
}
#breadcrumb span:after {
   content: " ·"
}
#breadcrumb span:last-child:after {
    content: "";
}
#breadcrumb a {
   text-align: center;
   vertical-align: middle;
   display: inline-block;
   padding-right: 15px;
   text-decoration: none;
   color: #454545 !important;
}
.home {
   border: none;
   margin: 8px 0;
}
/* 注释文字 */
sup.mobileref {
   display: none;
}
sup.mobileref:after {
   content: " ("attr(title) ")";
   display: inline;
}
/* code 内边距修复 */
code {
   padding: 3px
}
/* wikitable border */
#content.content table.wikitable {
   border: none;
}
/* wikitable green */
table.wikitable-green {
   background: #c9f6e1
}
.wikitable-green th {
   background: #13ec93
}
.wikitable-green td {
   background: #f3f3f3
}
/* wikitable border */
#content.content table.wikitable {
   border: none;
}
/* Ruby 模板 */
rb[data-id="template-ruby"]::before {
    content: "";
}
rb[data-id="template-ruby"]::before,
.template-ruby-hidden {
   display: inline-block;
   width: 0;
   font-size: 0;
}
/* 大家族模板 */
.navbox th,
.navbox-group {
   background: #a5e4a5;
}
/* 来个高优先级的 */
body .content .navbox {
   display: table !important;
}
.navbox .content table {
   width: 100% !important;
}
.navbox {
   border: 1px solid #aaa;
   clear: both;
   padding: 1px;
   text-align: center;
   width: 100%;
}
.navbox-group {
   white-space: nowrap;
}
.navbox table {
   margin: 0 !important;
}
.navbox-subgroup .navbox-group {
   background: #e6f6e6;
}
.navbox-title>div:first-of-type {
   display: none;
}
/* Fix by case : Rev 1327309 ([[Special:Permalink/1327309]])
   Address alignment issue of nested tabs in Navbox */
.navbox .TabLabel {
   text-align: left;
}
@media screen and (max-width: 640px) {
   .navbox-group {
     display: block;
   }
   .navbox-group+* {
     display: block;
     width: 100%;
     border-left: 1em solid #a5e4a5 !important;
     padding-left: 3px !important;
     padding-top: 3px !important;
     box-sizing: border-box;
   }
   .navbox-subgroup .navbox-group+* {
     border-left: 1em solid #e6f6e6 !important;
   }
}
/* 修复用户页欢迎辞覆盖编辑框的bug */
.overlay.visible {
    z-index: 3;
}
body .oo-ui-windowManager-modal > .oo-ui-dialog {
   z-index: 3;
}
/* Fix by case: Tracklist doesn't display on mobile devices due to inappropriate margin configuration  */
.tracklist {
   margin: 0 !important;
}
/* 扩展mediawiki.legacy.commonPrint,shared定义的样式 */
/* success and error messages */
.error,
.warning,
.success {
   font-size: larger;
}
.error {
   color: #d33;
}
.warning {
   color: #705000;
}
.success {
   color: #009000;
}
.errorbox,
.warningbox,
.successbox {
   border: 1px solid;
   padding: 0.5em 1em;
   margin-bottom: 1em;
    display: inline-block;
   zoom: 1;
}
.errorbox h2,
.warningbox h2,
.successbox h2 {
    font-size: 1em;
   color: inherit;
   font-weight: bold;
   display: inline;
   margin: 0 0.5em 0 0;
   border: 0;
}
.errorbox {
   color: #d33;
   border-color: #fac5c5;
   background-color: #fae3e3;
}
.warningbox {
   color: #705000;
   border-color: #fde29b;
   background-color: #fdf1d1;
}
.successbox {
   color: #008000;
   border-color: #b7fdb5;
   background-color: #e1fddf;
}
/* 折叠/展开（或自定义内容）的文字颜色，和桌面版一致，用于提示点击可触发事件。 */
a.mw-collapsible-text {
   color: #3366cc;
}

2021年7月21日 (三) 13:23的版本


代码： 

{{相关页面
|url1= 萌百:心形眼
|picture1= https://commons.moegirl.org.cn/thumb.php?f=60e25f705c2305fec80ae8dbccef701e.jpg&width=125
|title1= 心形眼
|text1= 
|url2= 萌百:心形瞳孔
|picture2= https://commons.moegirl.org.cn/thumb.php?f=%E5%BF%83%E5%BD%A2%E7%9E%B3%E5%AD%94.jpg&width=125
|title2= 心形瞳孔
|text2= 
|url3= 萌百:十字瞳孔
|picture3= https://commons.moegirl.org.cn/thumb.php?f=Nia_Teppelin.jpg&width=125
|title3= 十字瞳孔
|text3= 
}}

效果：

<img src="https://commons.moegirl.org.cn/thumb.php?f=60e25f705c2305fec80ae8dbccef701e.jpg&width=125" width="100%">
心形眼
<img src="https://commons.moegirl.org.cn/thumb.php?f=%E5%BF%83%E5%BD%A2%E7%9E%B3%E5%AD%94.jpg&width=125" width="100%">
心形瞳孔
<img src="https://commons.moegirl.org.cn/thumb.php?f=Nia_Teppelin.jpg&width=125" width="100%">
十字瞳孔


取自“https://hmoegirl.com/index.php?title=MediaWiki:Mobile.css&oldid=50236”