/** * ---------------------------------------- * 本页面用于在[[User:BearBin]]及其子页面提供样式。 * 虽然写的一塌糊涂,不过总之欢迎取用,能够署名就再好不过了~ * @author BearBin * @date 2023-03-26 * ---------------------------------------- */ /* 越改越窄的基础分块容器 ---------------------------------------- */ .bearbin-wrapper { display: block; box-sizing: border-box; max-width: 93em; margin: .5em auto 1em; padding: 1.3em; border-radius: .6em; box-shadow: 0 2px 13px #a6a6a6; transition-duration: .3s; } @media screen and (max-width: 768px) { .bearbin-wrapper { padding: .9em; } } @media screen and (max-width: 480px) { .bearbin-wrapper { padding: .6em; } } .bearbin-wrapper>ul .external { background: none; padding-right: inherit; } .bearbin-wrapper>ul>li { margin-bottom: .15em; } .bearbin-wrapper a, .bearbin-wrapper a:visited, .bearbin-wrapper a.external, .bearbin-wrapper a.external:visited { color: #0645ad; } .bearbin-wrapper a:active { color: #faa700; } .bearbin-wrapper .heimu a { color: #222; } /* 目录 ---------------------------------------- */ .bearbin-toc { display: table; box-sizing: border-box; min-width: 9.7em; margin-bottom: 1em; padding: .5em; font-size: inherit; border: 1px solid rgba(127, 127, 127, 0.3); border-radius: .6em; box-shadow: 1px 2px 5px rgba(127, 127, 127, 0.4); background: rgba(255, 255, 255, 0.4) !important; } .bearbin-toc .toc-head { height: 1.5em; line-height: 1.5em; text-align: center; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bearbin-toc .mw-collapsible-toggle { height: 1.5em; line-height: 1.5em; transition-duration: .3s; } .bearbin-toc .mw-collapsible-toggle:hover { background-color: rgba(172, 172, 172, 0.28); } .bearbin-toc .mw-collapsible-text:hover { text-decoration: none; } .bearbin-toc .toc-content { margin-top: .15em; } .bearbin-toc .toc-content>div a { display: block; padding: 0 0.8em; border-radius: .36em; transition-duration: .3s; } .bearbin-toc .mw-collapsible-text { padding: .1em .2em; transition-duration: .3s; border-radius: .4em; } .bearbin-toc .mw-collapsible-toggle-default::before, .bearbin-toc .mw-collapsible-toggle-default::after { content: none; } .bearbin-toc .toc-content>div a:hover { text-decoration: none; background-color: rgba(172, 172, 172, 0.28); } @media screen and (max-width: 576px) { .bearbin-toc { width: 100% } } /* 信息栏 ---------------------------------------- */ .bearbin-info { float: right; clear: right; margin: 0 0 .3em .4em; padding: .45em; border-radius: .6em; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.1); box-shadow: 1px 2px 5px rgba(127, 127, 127, 0.5); } @media screen and (max-width: 576px) { .bearbin-info { float: none; margin: 0 auto 0.3em; } } .bearbin-info .info-avatar img { display: block; width: 256px; max-width: 100%; margin: auto; border-radius: 50%; box-shadow: 0 0 5px rgba(127, 127, 127, .4); } .bearbin-info .info-headbar { margin: .3em 1em; text-align: center; font-size: 1.2em; font-weight: 700; border-bottom: 1px solid rgba(127, 127, 127, 0.3); } .bearbin-info .info-main { display: grid; grid-template-columns: 45% 55%; margin: auto .8em; } .bearbin-info .info-main>div { line-height: 2em; overflow: hidden; } .bearbin-info .content-title { padding-left: .5em; } .bearbin-info .score-column { transition-duration: .3s; } .bearbin-info .score-column:hover { transform: scale(1.1) translateY(.1em); } .bearbin-info .info-score { display: flex; flex-flow: row nowrap; justify-content: space-around; text-align: center; border-top: 1px solid rgba(127, 127, 127, 0.3); margin: .5em 1em .3em; } .bearbin-info .content-title, .bearbin-info .score-type { cursor: default; } .bearbin-info .score-type { font-weight: 700; } /* 序言 ---------------------------------------- */ .bearbin-cquote { display: flex; justify-content: center; box-sizing: border-box; min-width: 40%; } .bearbin-cquote .cquote-left { align-self: flex-start; } .bearbin-cquote .cquote-right { align-self: flex-end; } .bearbin-cquote .cquote-left, .bearbin-cquote .cquote-right { line-height: 1.2em; font-size: 2.2em; font-weight: 700; font-family: "Times New Roman", Times, "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", 思源宋体, serif; } .bearbin-cquote .cquote-content { padding: .6em 1em; min-height: 1.6em; line-height: 1.6em; text-align: center; } /* 用户框 ---------------------------------------- */ .bearbin-userbox { display: inline-block; margin: 1px 6px 2px 0; box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.4); transition: all .3s ease-out !important; border-collapse: collapse; border-spacing: 0; height: 60px; } .bearbin-userbox th { box-sizing: border-box; height: 60px; padding: 0; overflow: hidden; color: inherit; border-right: 1px solid rgba(127, 127, 127, 0.3); background-color: rgba(255, 255, 255, 0.6); vertical-align: middle; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .bearbin-userbox th>div { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; overflow: hidden; line-height: 1.2; } .bearbin-userbox th>div>img, .bearbin-userbox th>div>a>img{ max-width: 60px; max-height: 60px; } .bearbin-userbox td { box-sizing: border-box; width: 200px; padding: 0 0.3em; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.3); vertical-align: middle; line-height: 1.2em; } .bearbin-userbox:hover { transform: scale(1.05); } /* 贡献 ---------------------------------------- */ .bearbin-contribution { box-sizing: border-box; max-width: 93em; margin: auto; padding: .6em; border: 1px solid #ccc; border-radius: .6em; box-shadow: 0 0 6px rgba(127, 127, 127, 0.5); } .bearbin-contribution>ul { display: flex; flex-flow: row wrap; margin: 0 !important; cursor: default; } .bearbin-contribution li { margin: 0; list-style: none none; } .bearbin-contribution>ul>li { flex: 1 1 16em; margin: 0; padding: 0.6em !important; font-size: 114%; font-weight: 700; border-radius: .6em; transition-duration: .5s; } .bearbin-contribution>ul>li:hover { background-color: rgba(172, 172, 172, 0.22); } .bearbin-contribution>ul>li>ul { margin: 0 0 0 1.2em !important; max-height: 22em; overflow: auto; font-size: 87.7%; font-weight: 400; } .bearbin-contribution>ul>li>ul>li>i { padding-left: .1em; font-size: 60%; color: #889; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bearbin-sub::after, .bearbin-contribution>ul>li>ul>li>i::before { content: "改"; vertical-align: baseline; padding-left: .1em; color: #889; } @media screen and (max-width: 576px) { .bearbin-contribution { max-height: 83vh; overflow: auto; } .bearbin-contribution>ul>li>ul { max-height: initial; } } /* 按钮 ---------------------------------------- */ .bearbin-button { margin: 0 0 .3em; } .bearbin-buttontext { display: inline-block; padding: 0.3em 0.5em; border: 1px solid #ccc; border-radius: 0.4em; font-family: "Source Han Serif SC", "Source Han Serif CN", "Noto Serif CJK SC", sans-serif; font-size: 1.2em; font-weight: 800; box-shadow: 1px 2px 5px rgba(127, 127, 127, 0.3); transition-duration: .5s; background: linear-gradient(125deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0.6) 23%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.6) 77%, rgba(255, 255, 255, 1) 100%); } .bearbin-buttontext:hover { transform: translate(0, -0.2em); } /* 签名版 ---------------------------------------- */ .bearbin-signboard { overflow: auto; max-height: 26.5em; border: 3px solid #BBF9FF; border-radius: .6em; } .bearbin-signboard>ol { list-style-type: decimal-leading-zero !important; } .bearbin-signboard>ol>li { padding-left: .25em; border-radius: .45em; transition-duration: .3s; cursor: default; word-wrap: break-word; } .bearbin-signboard>ol>li:hover { background-color: rgba(172, 172, 172, .28); } .bearbin-signboard>ol>li span[style^="color:#000;font-size:1em;line-height:1.4;background:#F5F6F7;"] { background-color: rgba(245, 246, 247, .5) !important; } /* 歌单 ---------------------------------------- */ .bearbin-musiclist { display: flex; flex-flow: row wrap; margin: auto; justify-content: space-around; column-gap: .2em; } .bearbin-musicbox { display: inline-block; flex: 0 1 330px; box-sizing: border-box; margin: .12em 0 .7em; padding: .8em 1.2em; border: 1px solid #ccc; border-radius: .5em; box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.45); transition-duration: .4s; line-height: 1.1em; } @media screen and (max-width: 576px) { .bearbin-musicbox { margin: .15em auto; padding: .4em .8em; } } .bearbin-musicbox .music163 { min-height: 1.1em; } .bearbin-wrapper>div:first-child:not([class]):not([id]):not([style]), .bearbin-musicbox .subinfo { display: none; width: 0; height: 0; overflow: hidden; clear: none; } .bearbin-musicbox:hover { transform: scale(1.04); } .bearbin-musicbox .bearbin-comment { text-align: right; } /* 展廊 ---------------------------------------- */ .bearbin-hall { display: flex; flex-flow: row wrap; justify-content: space-around; column-gap: .6em; } .bearbin-showcase { position: relative; display: inline-block; overflow: hidden; box-sizing: border-box; width: 160px; margin-bottom: .6em; background: linear-gradient(125deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0.6) 23%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.6) 77%, rgba(255, 255, 255, 1) 100%); border-radius: 8px; box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.5); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform .7s cubic-bezier(0.175, 0.885, 0.32, 1.25); } .bearbin-showcase:hover { transform: translate(0, -0.35em); } .bearbin-showcase .showcase-content { display: flex; justify-content: center; align-items: center; min-height: 64px; overflow: hidden; margin: 0; padding: 0; text-align: center; } .bearbin-showcase .showcase-content img { width: 100%; height: auto; } .bearbin-showcase .content-text { font-size: 1.1em; font-weight: 700; } .bearbin-showcase .showcase-summary { margin: .2em .7em .5em; line-height: 1.5em; } .bearbin-showcase a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 4; } /* 标题 ---------------------------------------- */ h2.bearbin-title { margin: .3em 0 !important; padding: 0 !important; border-bottom: 0 !important; } h3.bearbin-title { margin: .3em 0 0 0 !important; padding: 0 !important; } h2.bearbin-title .mw-headline { padding-left: 0 !important; font-family: "Noto Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", 思源黑体, -apple-system, "Microsoft YaHei", "Wenquanyi Micro Hei", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; cursor: default; color: #FFFFFF; text-shadow: -1px -1px 0 #66d, -1px 0 0 #66d, -1px 1px 0 #66d, 1px -1px 0 #66d, 1px 0 0 #66d, 1px 1px 0 #66d, 0 1px 0 #66d, 0 -1px 0 #66d, 0 2px 2px rgba(0, 0, 0, 0.6); } h2.bearbin-title .mw-headline::before { content: "\00a0"; display: inline-block; width: 1.2em; background: url("https://img.moegirl.org.cn/common/d/df/%E5%8D%83%E6%A1%83icon.png") center/contain no-repeat; filter: drop-shadow(0 1px 2px rgba(228, 87, 145, .5)); } h2.bearbin-title .mw-editsection { float: right; margin-top: .25em; } h2.bearbin-title .mw-editsection-bracket, h3.bearbin-title span.mw-editsection, h4.bearbin-title span.mw-editsection { display: none; } h2.bearbin-title span.mw-editsection a, h2.bearbin-title span.mw-editsection-divider { opacity: .45; } h2.bearbin-title span.mw-editsection a:hover { text-decoration: none; opacity: .85; } h2.bearbin-title::before, h3.bearbin-title::before, h4.bearbin-title::before, h2.bearbin-title::after { content: none !important; }