此处为全站公告，通常对读者进行申明或对该WIKI某些规则进行公告，请在确认后修改本通告。
本WIKI编辑权限开放，欢迎收藏起来防止迷路，也希望有爱的小伙伴和我们一起编辑哟~
编辑全站公告 • 编辑帮助:目录 • BWIKI反馈留言板
全站通知：
用户:7709386/PlayerTrekkerCard.css
刷
历
编
跳到导航
跳到搜索
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
.player-trekker-card {
display:block !important;
font-weight: bold;
user-select: none;
}
.trekker-card-layout {
width: 100%;
height: 35vw;
background-color: #ebf1f3;
border-radius: 15px 15px 5px 5px;
box-shadow: 1px 1px 7px 1px #cecece;
}
.layout-header {
position: relative;
display: flex;
width: 100%;
height: 4vw;
background-color: #213c6c;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: #f9f9f7;
align-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.layout-header::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
border-top-right-radius: 15px;
background: #264278;
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 0 100%);
}
.layout-header .text-info {
margin-top: 0.6vw;
margin-left: 2vw;
color: #fff;
font-size: 2vw;
font-family: nova;
}
.trekker-uid-box {
display: flex;
margin-right: 2vw;
color: #b3c1cf;
font-size: 2vw;
justify-content: space-around;
align-items: center;
align-content: center;
flex-wrap: nowrap;
flex-direction: row;
z-index: 1;
}
.trekker-uid-box:has(.trekker-uid-copy-btn:hover) .trekker-uid {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
.trekker-uid-box .text-uid {
margin-right: 0.5vw;
}
.trekker-uid-copy-btn {
position: relative;
width: 2vw;
height: 2vw;
margin-left: 0.5vw;
}
.trekker-uid-copy-btn::before {
content: "";
position: absolute;
top: 0.4vw;
right: 0.4vw;
width: 1vw;
height: 1vw;
background-color: #b3c1cf;
border-radius: 1px;
}
.trekker-uid-copy-btn::after {
content: "";
position: absolute;
left: 0.3vw;
bottom: 0.3vw;
width: 1vw;
height: 1vw;
background-color: #b3c1cf;
border-radius: 1px;
box-shadow: 1px -1px 1px 1px #264278;
}
.trekker-uid-copy-btn:hover {
scale: 0.95;
cursor: pointer;
}
.layout-main {
display: grid;
padding: 4vw 2vw 2vw 2vw;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
}
.trekker-avatar-box {
position: relative;
width: 13vw;
height: 13vw;
border: 1vw solid #fff;
border-radius: 6px;
background-repeat: no-repeat;
background-size: contain;
box-shadow: 0px 0px 3px 0px #ccc;
grid-area: 1 / 1 / 3 / 2;
justify-self: center;
align-self: center;
}
.trekker-avatar-box::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 3vw;
height: 3vw;
border-left: 1px solid rgb(39 67 120 / 50%);
border-top: 1px solid rgb(39 67 120 / 50%);
border-top-left-radius: 0.4vw;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
}
.trekker-avatar-box:hover {
box-shadow: 0px 0px 0px 0.2vw #ccc;
}
.trekker-level-box {
position: absolute;
top: -2.6vw;
left: -3.1vw;
display: flex;
width: 8vw;
height: 8vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
.trekker-level {
position: relative;
top: -0.1vw;
color: #152a46;
text-align: center;
font-weight: bolder;
font-size: 2.3vw;
}
.text-level {
position: relative;
top: -0.7vw;
color: #152a46;
text-align: center;
font-weight: bolder;
font-size: 0.9vw;
}
.trekker-name-box {
display: flex;
margin: 1vw;
color: #2e4975;
font-size: 3vw;
background: #fff;
border-radius: 3px;
box-shadow: 0 0 2px 1px #dbe1e7;
grid-area: 1 / 2 / 2 / 6;
align-items: center;
justify-content: space-between;
}
.trekker-name-text {
margin-left: 2rem;
font-weight: bolder;
line-height: normal;
}
.trekker-text-edit {
position: relative;
width: 3vw;
height: 3vw;
margin-right: 1.5vw;
border-bottom: 0.3vw solid #5f87b3;
cursor: pointer;
}
.trekker-text-edit::before {
content: "";
position: absolute;
top: 1vw;
left: 0.5vw;
width: 1.4vw;
height: 1.4vw;
background: #5f87b3;
clip-path: polygon(0 65%, 65% 0, 100% 35%, 35% 100%, 0 100%);
}
.trekker-text-edit::after {
content: "";
position: absolute;
top: 0.6vw;
left: 1.6vw;
width: 0.7vw;
height: 0.7vw;
background: #5f87b3;
border-top-left-radius: 0.2vw;
border-top-right-radius: 0.2vw;
transform: rotate(45deg);
}
.trekker-text-edit:hover {
scale: 0.9;
}
.trekker-title-box {
display: flex;
margin: 1vw;
color: #3a62ab;
background: #fff;
border-radius: 3px;
box-shadow: 0 0 2px 1px #dbe1e7;
font-size: 2vw;
grid-area: 2 / 2 / 3 / 6;
justify-content: space-between;
align-items: center;
}
.trekker-title-box {
display: flex;
color: #3a62ab;
border-radius: 3px;
box-shadow: 0 0 3px 0px #dbe1e7;
font-size: 2vw;
grid-area: 2 / 2 / 3 / 6;
justify-content: space-between;
align-items: center;
}
.trekker-title-text {
margin-left: 2rem;
line-height: normal;
}
.trekker-name-box:has(.trekker-text-edit:hover) .trekker-name-text,
.trekker-title-box:has(.trekker-text-edit:hover) .trekker-title-text{
scale: 0.98;
text-decoration: underline;
}
.trekker-signature {
position: relative;
display: grid;
width: 100%;
height: 14vw;
margin-top: 2vw;
padding: 2vw;
background-color: #ebf1f3;
border-radius: 5px;
box-shadow: 0px 1px 7px 1px #cecece;
grid-template-columns: 5fr 1fr;
grid-column-gap: 20px;
align-items: center;
}
.trekker-signature::before {
content: "";
position: absolute;
top: -1.6vw;
left: 8vw;
width: 4vw;
height: 1.6vw;
background: #ebf1f3;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.trekker-signature .text-signature {
padding: 1vw 3vw;
color: #264278;
font-size: clamp(1rem, 2.5vw, 2.5rem);
background-color: #ffffff;
border: 0.3vw solid #d1d7df;
letter-spacing: 0.2vw;
}
.trekker-signature .text-signature hr {
height: 0.15vw;
background-color: #c5cdd7;
}
.trekker-signature .signature-btn {
position: relative;
color: #264278;
border: 2px solid #5e697d;
border-bottom-width: medium;
box-shadow: 1px 3px 2px 0px #98a0af;
border-radius: 3vw;
font-size: clamp(1rem, 2.5vw, 4rem);
letter-spacing: 0.5vw;
text-align: center;
}
.trekker-signature .signature-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: 3vw;
}
.trekker-signature .signature-btn:hover {
scale: 0.9;
}
.trekker-signature:has(.signature-btn:hover) .text-signature {
font-weight: bold;
text-decoration: underline;
}
.trekker-members-bar {
position: relative;
width: 100%;
height: 3vw;
margin-top: 2vw;
background-color: #264278;
border-radius: 0.25vw;
color: #f9f9f7;
font-size: 2vw;
text-indent: 2.5vw;
box-shadow: 0px 1px 7px 1px #cecece;
clip-path: polygon(0 0, 100% 0%, 99% 100%, 0% 100%);
}
.trekker-members-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.2vw;
height: 100%;
background-color: #26497c;
clip-path: polygon(0 0, 100% 0%, 65% 100%, 0% 100%);
}
.trekker-members-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.2vw;
height: 100%;
background-color: rgb(207 207 207 / 8%);
clip-path: polygon(0 0, 35% 0, 100% 100%, 0% 100%);
}
.trekker-members {
display: flex;
width: 100%;
height: 23vw;
margin-top: 2vw;
background-color: #ebf1f3;
border-radius: 5px;
box-shadow: 0px 1px 7px 1px #cecece;
align-content: center;
justify-content: center;
align-items: center;
gap: 3.2vw;
}
.trekker-honorary-title-box {
display: grid;
margin: 3vw;
margin-top: 2vw;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 2.5vw;
align-items: center;
}
.honorary-title {
position: relative;
width: 100%;
height: 6.5vw;
border: 0.15vw solid #b3c1cf;
border-radius: 3vw;
background-repeat: no-repeat;
background-position: -0.9vw -0.2vw;
background-size: 111% 114%;
}
.honorary-title:hover {
border-width: 0.2vw;
}
.honorary-title::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.4vw solid #fff;
border-radius: 3vw;
}
.honorary-title::after {
content: "";
position: absolute;
top: 37%;
left: 43%;
width: 1.5vw;
height: 1.5vw;
background: #95b1cb;
clip-path: polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 39%, 100% 40%, 100% 60%, 60% 61%, 60% 100%, 40% 100%, 40% 62%, 0 61%);
}
.honorary-title.title-1 {
grid-column: span 3 / span 3;
}
.honorary-title.title-2,
.honorary-title.title-3 {
grid-column: span 2 / span 2;
}
.trekker-honorary-title-edit {
position: relative;
display: flex;
width: 5vw;
height: 5vw;
border: 2px solid #5e697d;
border-radius: 50%;
box-shadow: 1px 3px 2px 0px #98a0af;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(235, 247, 251, 1) 100%);
grid-column-start: 8;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.trekker-honorary-title-edit:hover {
border-width: 3px;
box-shadow: inset 1px 3px 5px 0px #98a0af;
}
.honorary-title-edit_icon {
width: 3vw;
height: 3vw;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
沪公网安备 31011002002714 号