@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
div.zhihu-box {
background-color: #FFF;
box-shadow: 0 1px 3px hsla(0,0%,7%,.1);
padding: 1em;
margin: 1em 0;
}
div.zhihu-box>hr {
margin-inline: 0;
opacity: 0.2;
}
div.zhihu-box:not(.qus) :not(>.user, .content) p,
div.zhihu-box br {
display: contents;
}
div.zhihu-box div.header {
display: flex;
align-items: center;
}
div.zhihu-box div.header span {
flex-grow: 1;
text-align: right;
padding: 0 0.5em;
color: #AAA;
transition: all 0.25s ease;
}
div.zhihu-box div.header span:hover {
color: #909090;
}
div.zhihu-box div.header span::after {
content: " \f07d";
font-family: "FontAwesome";
}
div.zhihu-box div.footer span:hover {
cursor: pointer;
}
div.user {
display: flex;
justify-content: space-between;
margin-bottom: 1em;
align-items: center;
}
div.user-1 {
display: grid;
gap: 0 1em;
grid: 'img name'
'img sign';
align-items: center;
width: auto;
}
div.user-1 img.user-img {
grid-area: img;
display: block;
width: 2.4rem;
height: 2.4rem;
}
div.user-1>p {
margin: 0;
line-height: 1rem;
}
div.user-1>p:first-of-type {
grid-area: name;
font-weight: bold;
}
div.user-1>p:last-of-type {
grid-area: sign;
}
div.zhihu-box div.footer span:is(.up, .down),
div.zhihu-box div.user span.button-1 {
float: right;
clear: right;
background-color: rgba(23, 114, 246, 0.1);
color: #1772f6;
border-radius: 3px;
transition: all 0.25s ease;
}
div.zhihu-box div.footer span:is(.up, .down):hover,
div.zhihu-box div.user span.button-1:hover {
background-color: rgba(23, 114, 246, 0.15);
}
div.zhihu-box div.user span.button-1 {
padding: 0.75em 1em;
}
div.content {
padding-top: 1em 0;
}
div.content div.scp-image-block {
border: none;
box-shadow: none;
}
div.content div.scp-image-block[class*="block"] {
margin: 1em auto;
float: none;
}
div.scp-image-block>div.scp-image-caption {
background-color: #FFF;
border-top: none;
font-size: unset;
font-family: 'K2D', sans-serif;
padding-block: 1em 0;
}
div.scp-image-block>div.scp-image-caption>p {
box-sizing: border-box;
font-size: 0.8em;
font-weight: normal;
color: #808080;
}
div.zhihu-box div.footer {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 1em;
}
div.zhihu-box div.footer :is(p, br) {
display: contents;
}
div.zhihu-box div.footer span {
padding: 0.5em 1em;
display: flex;
align-items: center;
}
div.zhihu-box div.footer span>span {
padding: 0;
}
div.zhihu-box div.footer span.down>span {
font-size: 0;
}
div.zhihu-box div.footer span:not(.up, .down, .subs, .write) {
color: #AAA;
}
div.zhihu-box div.footer span:not(.up, .down):hover {
color: #909090;
}
div.zhihu-box div.footer span::before, div.zhihu-box.write>p::before {
font-family: "FontAwesome";
font-size: 0.8rem;
}
div.zhihu-box div.footer span.up::before {content: "\f0d8";}
div.zhihu-box div.footer span.down::before {content: "\f0d7";}
div.zhihu-box div.footer span.forum::before {content: "\f075";}
div.zhihu-box div.footer span.share::before {content: "\f064";}
div.zhihu-box div.footer span.collect::before {content: "\f005";}
div.zhihu-box div.footer span.like::before {content: "\f004";}
div.zhihu-box div.footer span.good::before {content: "\f164";}
div.zhihu-box div.footer span.pls::before {content: "\f234";}
div.zhihu-box div.footer span.write::before, div.zhihu-box.write p::before {content: "\f304";}
@media (max-width: 767px) {
div.zhihu-box div.footer span {
padding: 0.5em;
}
}
@media (max-width: 479px) {
div.zhihu-box div.footer span:not(.up, .down, .write, .pls, .subs) {
font-size: 0;
flex-grow: 1;
}
}
div.zhihu-box.qus {
background-color: #FFF;
box-shadow: 0 1px 3px hsla(0,0%,7%,.1);
padding: 1em;
margin: 1em 0;
}
div.zhihu-box.qus h2 {
margin: 0;
}
div.footer.qus span {
border-radius: 3px;
}
div.zhihu-box div.footer span.subs {
background-color: #1772F6;
color: #FFF;
padding-inline: 16px;
}
div.zhihu-box div.footer span.subs:hover {
background-color: #0063e4;
color: #FFF;
}
div.zhihu-box div.footer span.write {
border: 1px solid #1772F6;
color: #1772F6;
}
div.zhihu-box div.footer span.write:hover {
background-color: #1772F61A;
color: #1772F6
}
div.zhihu-box div.footer span.pls {
border: 1px solid #8491a5;
color: #8491A5;
}
div.zhihu-box div.footer span.pls:hover {
background-color: #8491a50f;
color: #8194A5;
}
div.zhihu-box.write {
color: #1772F6;
}
div.zhihu-box.write:hover {
background-color: #1772F61A;
}
div.zhihu-box.write>p {
margin: 0;
text-align: center;
}
