.bili-dyn-box,
.bili-dyn-box div {
box-sizing: border-box;
}
.bili-dyn-box {
max-width: 45em;
position: relative;
margin: 0 auto .5em;
padding: 1.5em 1.5em 1em 6em;
background-color: #fff;
border-radius: .3em;
box-shadow: 0 0 .6em rgba(127, 127, 127, 0.5);
cursor: default;
}
.bili-dyn-box a.external {
background-image: none !important;
padding-right: 0;
}
.bili-dyn-avatar {
position: absolute;
top: 1.5em;
left: 1.5em;
height: 3em;
width: 3em;
border-radius: 50%;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bili-dyn-avatar img {
width: 100%;
}
.bili-dyn-head {
height: 3em;
display: flex;
flex-flow: column;
justify-content: center;
white-space: nowrap;
}
.bili-dyn-head a:hover,
.bili-dyn-head a:focus {
text-decoration: none !important;
}
.bili-dyn-username {
padding-top: .2em;
font-size: 1.125em;
}
.bili-dyn-username a:hover,
.bili-dyn-username a:focus {
color: #00a1d6 !important;
}
.bili-dyn-username a {
color: #222 !important;
}
.bili-dyn-time {
padding-top: .15em;
font-size: smaller;
color: #99a2aa;
}
.bili-dyn-time:hover {
color: #fb7299 !important;
}
.bili-dyn-time a,
.bili-dyn-time a:hover {
color: inherit !important;
}
.bili-dyn-content {
margin-top: .5em;
}
.bili-dyn-pic {
display: flex;
flex-wrap: wrap;
max-width: 25em;
}
.bili-dyn-pic>div {
box-sizing: border-box;
margin: 0 .3em .3em 0;
height: 7.5em;
width: 7.5em;
overflow: hidden;
}
.bili-dyn-pic>div img {
object-fit: cover;
object-position: 50%;
width: 100%;
height: 100%;
}
.bili-dyn-interaction {
margin: .7em 0;
border-left: 2px solid #e7e7e7;
line-height: 1.4;
color: #99a2aa;
}
.bili-dyn-interaction>div {
display: flex;
align-items: center;
}
.interaction-icon {
display: flex;
}
.interaction-icon img {
width: .85em;
padding: 0 .85em;
}
.like-user {
color: #6d757a;
}
.like-user>a {
color: inherit;
}
.like-user>a:hover,
.like-user>a.external:hover {
text-decoration: none;
background-color: #dde2eb !important;
border-radius: .15em;
}
.bili-dyn-bottom {
display: flex;
height: 3em;
font-size: .9em;
color: #99a2aa;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bili-dyn-action {
display: flex;
align-items: center;
flex: 6.5em;
}
.bili-dyn-action>img {
max-width: 20px;
max-height: 16px;
margin-right: 4px;
}