Template:沙盒/TemplateStyles/Chulanker/user.css

/**
* ----------------------------------------
* 本页面仅允许用于个人用户页，核心代码源自萌百User:BearBin。
* ----------------------------------------
*/

/* 分块
---------------------------------------- */
.chulanker-wrapper {
display: block;
box-sizing: border-box;
max-width: 93em;
margin: .5em auto 1em;
padding: 1.3em;
border-radius: .6em;
box-shadow: 0 2px 10px #bbb;
transition-duration: .3s;
}

@media screen and (max-width: 768px) {
.chulanker-wrapper {
padding: .9em;
}
}

@media screen and (max-width: 480px) {
.chulanker-wrapper {
padding: .6em;
}
}

.chulanker-wrapper>ul .external {
background: none;
padding-right: inherit;
}

.chulanker-wrapper>ul>li {
margin-bottom: .15em;
}

.chulanker-wrapper a,
.chulanker-wrapper a:visited,
.chulanker-wrapper a.external,
.chulanker-wrapper a.external:visited {
color: #0645ad;
}

.chulanker-wrapper a:active {
color: #faa700;
}

.chulanker-wrapper .heimu a {
color: #222;
}

/* 用户框
---------------------------------------- */
.chulanker-userbox {
display: inline-block;
margin: 1px 6px 2px 0;
box-shadow: 2px 2px 5px rgba(127, 127, 127, 0.4);
transition: all .3s !important;
border-collapse: collapse;
border-spacing: 0;
}

.chulanker-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;
}

.chulanker-userbox th>div {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
overflow: hidden;
line-height: 1.2;
}

.chulanker-userbox th>div>img,
.aliiaalio-userbox th>div>a>img{
max-width: 60px;
max-height: 60px;
}

.chulanker-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;
}

.chulanker-userbox:hover {
transform: scale(1.05);
}

/* 展廊
---------------------------------------- */
.chulanker-hall {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
column-gap: .6em;
}

.chulanker-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);
transition-duration: .4s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition-duration: .7s;
}

.chulanker-showcase:hover {
transform: translate(0, -0.35em);
}

.chulanker-showcase .showcase-content {
display: flex;
justify-content: center;
align-items: center;
min-height: 64px;
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
}

.chulanker-showcase .showcase-content img {
width: 100%;
height: auto;
}

.chulanker-showcase .content-text {
font-size: 1.1em;
font-weight: 700;
}

.chulanker-showcase .showcase-summary {
margin: .2em .7em .5em;
line-height: 1.5em;
}

.chulanker-showcase a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 4;
}