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