/** * ---------------------------------------- * 本页面仅用于测试,核心代码均搬运自[[User:朶茜雅]] * 目的仅在于进行一些微调;作为初学者尝试; *一切权利归属于[[User:朶茜雅]]大佬 * ---------------------------------------- */ .UserInfo { float: right; width: 260px; font-size: 90%; margin: 1em 0 1em 1em; clear: right; } @media screen and (max-width: 576px) { .bearbin-info { float: none; margin: 0 auto 0.3em; } } .UserInfoavatar { z-index: 1; margin: auto; width: 180px; height: 180px; position: relative; border-radius: 50%; padding: 7px; background: rgba(250, 250, 250, 0.5); border: 1px solid #e3e5e7; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px 0px; } .UserInfoavatarimg { position: relative; border-radius: 50%; height: 100%; width: 100%; overflow: hidden; } .UserInfoimg { object-fit: cover; object-position: top; width: 100%; height: 100%; } .UserInfo-box { text-align: center; position: relative; border-radius: 10px; min-height: 40px; background: rgba(250, 250, 250, 0.5); margin-top: -75px; padding-top: 75px; padding-bottom: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px; border: 1px solid #e3e5e7; } .UserInfo-content{ padding: 0 20px; } .UserInfo-username { color: #18191c; padding: 0 10px; font-size: 1.5em; margin-top: 10px; } .UserInfo-count { display: flex; flex-direction: row; justify-content: space-between; padding: 0 10px; border-radius: 6px; margin-top: 12px; margin-bottom: 12px; } .UserInfo-count:hover{ background: #f4f4f4; transition: all .2s ease; } .UserInfo-count-item { display: flex; flex-direction: column; line-height: normal; } .countitem-text { font-size: 0.8em; width: 6em; color: #9499a0; transition: all .2s ease; } .countitem-count { font-size: 1.4em; font-weight: bold; color: #18191c; transition: all .2s ease; } .UserInfo-count-item:hover .countitem-text, .UserInfo-count-item:hover .countitem-count { color: #00a1d6; transition: all .2s ease; } .UserInfo-properties { border-radius: 6px; display: flex; padding: 2px 10px; margin-top: 3px; margin-bottom: 3px; transition: all .2s ease; } .UserInfo-properties.ulink { text-align: left; padding: 6px 10px; justify-content: space-between; align-items: center; line-height: 17.5px; transition: all .2s ease; } .UserInfo-properties.ulink .UserInfo-properties.ulink-icon-right { text-align: left; padding: 6px 10px; justify-content: space-between; align-items: center; line-height: 17.5px; transition: all .2s ease; } .ulink-content{ line-height: 17.5px; display: flex; align-items: center; } a.external{ background: none; padding-right: 0; } .UserInfo-properties.ulink::after{ content: "\3e"; display: inline-block; font-family: Consolas,'Lucida Console', 'Courier New', monospace; font-size: 1.4em; color: #9499a0; } .UserInfo-properties:hover{ background: #f4f4f4; transition: all .2s ease; } .properties-text { flex-grow: 0; flex-shrink: 0; width: 5em; margin-right: 6px; text-align: left; color: #9499a0; } .properties-cont { color: #18191c;} .split-line { margin: 10px 0; width: 100%; height: 1px; background: #e3e5e7; }