文学领主/style.css:修订间差异
外观
无编辑摘要 |
无编辑摘要 |
||
第8行: | 第8行: | ||
border:0; | border:0; | ||
} | } | ||
.link-box { | |||
position: relative; | |||
z-index: 2; | |||
display: inline-flex; | |||
align-items: stretch; | |||
height: 48px; | |||
width: 160px; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
outline: solid 1px #bbb; | |||
transition: all 0.13s ease-in-out; | |||
} | |||
.link-box:hover { | |||
z-index: 3; | |||
outline: solid 1px #66ccff; | |||
} | |||
.link-box:active { | |||
z-index: 1; | |||
outline: solid 1px #ee0000; | |||
transform: none; | |||
transition: all 0.04s ease-in; | |||
} | |||
.img-box { | |||
flex: 0 0 48px; | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.img-box img { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100% !important; | |||
height: 100% !important; | |||
object-fit: cover; | |||
} | |||
.txt-box { | |||
flex-grow: 1; | |||
display: flex; | |||
flex-flow: column nowrap; | |||
padding: 3px 10px 3px 7px; | |||
z-index: 2; | |||
} | |||
.txt-box>.title { | |||
display: block; | |||
font-weight: bold; | |||
color: #222; | |||
font-size: 12px; | |||
} | |||
.txt-box>.text { | |||
display: block; | |||
color: #666; | |||
font-size: 7px; | |||
} | |||
.link-cover, .url-cover { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 3; | |||
} | |||
.txt-box.flag-myth::after { | |||
content: "传说"; | |||
color: #fff; | |||
background: #000; | |||
position: absolute; | |||
right: 3px; | |||
border-radius: 2px; | |||
font-size: 9px; | |||
padding: 2px; | |||
line-height: 1em; | |||
} | |||
.txt-box.flag-real::after { | |||
content: "现实"; | |||
color: #fff; | |||
background: #01a43c; | |||
position: absolute; | |||
right: 3px; | |||
border-radius: 2px; | |||
font-size: 9px; | |||
padding: 2px; | |||
line-height: 1em; | |||
} | |||
.unexist { | |||
outline: dashed 1px #ccc !important; | |||
} | |||
/*标题风格化*/ | /*标题风格化*/ | ||
h2 { | h2 { |
2022年3月12日 (六) 04:10的版本
/* 搬运于萌娘百科的页面Slow Loop专用样式表 */ /*MinervaNeue皮肤下图片缩放*/ .infobox2 img { width:100%; max-width:312px !important; height:auto; } /*移除信息栏中tab的边框*/ .infobox2 .TabContent{ border:0; } .link-box { position: relative; z-index: 2; display: inline-flex; align-items: stretch; height: 48px; width: 160px; border-radius: 6px; overflow: hidden; outline: solid 1px #bbb; transition: all 0.13s ease-in-out; } .link-box:hover { z-index: 3; outline: solid 1px #66ccff; } .link-box:active { z-index: 1; outline: solid 1px #ee0000; transform: none; transition: all 0.04s ease-in; } .img-box { flex: 0 0 48px; position: relative; z-index: 1; } .img-box img { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover; } .txt-box { flex-grow: 1; display: flex; flex-flow: column nowrap; padding: 3px 10px 3px 7px; z-index: 2; } .txt-box>.title { display: block; font-weight: bold; color: #222; font-size: 12px; } .txt-box>.text { display: block; color: #666; font-size: 7px; } .link-cover, .url-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .txt-box.flag-myth::after { content: "传说"; color: #fff; background: #000; position: absolute; right: 3px; border-radius: 2px; font-size: 9px; padding: 2px; line-height: 1em; } .txt-box.flag-real::after { content: "现实"; color: #fff; background: #01a43c; position: absolute; right: 3px; border-radius: 2px; font-size: 9px; padding: 2px; line-height: 1em; } .unexist { outline: dashed 1px #ccc !important; } /*标题风格化*/ h2 { overflow: visible; font: 700 1.6em sans-serif; border-bottom: none; margin-top: 1.6em; } h2 .mw-headline { display: inline-block; } h2 .mw-headline::after { content: ''; display: block; background: linear-gradient(66deg, #0000C6, #00E3E3); height: 0.7em; margin: -0.5em 0 0 -0.5em; width: 100%; border-radius: 0.35em; box-shadow: 0 0 1px 1px #fff; } h3 .mw-headline { color: #1568A2; font-size: 120%; padding: 0 10px; border-bottom: solid 2px #0B7698; } h4 .mw-headline { border-left: solid 10px #0C7698; color: rgba(4,87,146,1.00); padding-left: 7px; position: relative; font-size: 118%; padding-bottom: 5px; } h5 .mw-headline { padding-left: 10px; font-size: 108%; position: relative; font-weight: 900; } /*圆角化*/ .infoBox,.infoBoxContent,.infoBox2,.navbox-title,.navbox-group,.wikitable,.bilibili-title,.navBox,table,.toc,pre,.card,.radius,.TabContent { border-radius: 7px; } .infoBoxContent { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* 黑幕颜色 */ .heimu { background-color: #0f395f; color: #0f395f; } .heimu a, .heimu.fakelink { color: Transparent; } /*目录在宽屏下改为两栏显示*/ @media screen and (min-width:1000px) { .toc ul { column-count: 2; } .toc ul > li > ul { column-count: 1; } .toctoggle { float: right; } } /*移动版允许使用small、big标签*/ small { font-size:smaller; } big { font-size:larger; } /* 编辑按钮右置、半透明 */ .mw-editsection { float: right; font-size: 13px; opacity: 0.4; transition: opacity 0.5s; } .mw-editsection:hover { opacity: 1; } /*表格样式*/ .stubborn>table { border-radius: 15px; border: rgba(197,226,232,1.00) 3px solid; overflow: hidden; margin-top: 15px!important; margin-left: 15px; } table.wikitable { border-radius: 15px; border: rgba(197,226,232,1.00) 3px solid; overflow: hidden; } .wikitable th { border: 1.2px solid #7fcad9; color:#0b7698; border-radius: 4px; background-color: rgba(161, 212, 218, 0.4); } #ost .wikitable { margin:0.5em 2%; } #ost .song_length { text-align:right; } .wikitable td { border: 1.2px solid #7fcad9; background-color: rgba(135, 206, 235, 0.1); } /* 分割线 */ hr { margin: 1em 10% 0.5em; width: 80%; border-bottom: 2px dashed #3fa8bd; background: none; } /* 折叠窗优化 */ table.wikitable { text-align: center; } table.wikitable img { height: auto; max-width: 90%; } table.wikitable > tr > th, table.wikitable > * > tr > th { background-color: #cde5ea; } .mw-collapsible-text { color: #0b7698; } table.wikitable tbody{ display: contents; } /* 更改选中颜色 */ ::selection { color: #0b7698; background-color: #cde5ea; } /** Toggle文字按钮下划线 **/ .toggleunderline:hover { text-decoration-line: underline; } /** 链接下划线 **/ a, .toggleunderline { text-decoration-style: wavy; } /** #各话简介・先行图 Tabs按钮 **/ .tabslabelbt:active { transform: scale(0.95); } /* 媒体适配 */ @media screen and (max-width: 960px) { table.wikitable { margin: 0.5em 0; width: 100%!important; } h2 { padding: 5px 0em; border-radius: 5px 5px 0 0; } table.wikitable tbody{ display: inline-block; } #ost .wikitable { text-align:left; width:auto!important; } } /* [[Category:在主名字空间下的CSS页面]] */