/*
===================================
节选卡片组件
===================================
*/
:root {
--excerpts-padding: 0.5rem;
--excerpts-padding-opt: -0.6rem;
--excborder-wrap-width: 3px;
--excborder-mid-width: 3px;
--excborder-title-width: 3px;
--excerpts-bgcolor: transparent;
--excerpts-text: #333;
--excerpts-link: inherit;
--excerpts-wrap-margin: inherit;
/* 受关注旗帜 */
--excerpts-interest-txsize: 1rem;
--excerpts-interest-size: 1.5rem;
--excerpts-interest-mobsize: 1.5rem;
--excerpts-delta-size: 0 0.8rem 0.4rem 0.8rem;
--excerpts-delta-mobsize: 0 0.8rem 0.4rem 0.8rem;
--excerpts-interest-left: 2rem;
--excerpts-interest-mobleft: 1rem;
--excerpts-interest-right: inherit;
--excerpts-interest-mobright: inherit;
/* 蓝底黄字*/
--excerpts-interest-txcolor: orange;
--excerpts-interest-bgcolor: #161648;
--excerpts-interest-ddcolor: orange;
/*
红色黄心,大旗子靠右
--excerpts-interest-txsize:2rem;
--excerpts-interest-size:3rem;
--excerpts-interest-mobsize:1.5rem;
--excerpts-delta-size:0rem 1.5rem 1.5rem 1.5rem;
--excerpts-delta-mobsize:0 0.8rem 0.4rem 0.8rem;
--excerpts-interest-right:1.5rem;
--excerpts-interest-mobright:90%;
*/
}
/**/
.excerpts-wrap {
display: flex;
flex-wrap: nowrap;
padding: var(--excerpts-padding);
border: 3px double #999;
border-color: var(--excborder-wrap-color);
border-width: var(--excborder-wrap-width);
background-color: var(--excerpts-bgcolor);
color: var(--excerpts-text);
margin: var(--excerpts-wrap-margin);
}
.excerpts-wrap a,
.excerpts-wrap a:visited {
color: var(--excerpts-link);
}
.excerpts-author .excerpts-cell-1 span:last-child{
display: none;
}
/* 选项 */
.excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:first-child,
.excerpts-wrap[class*="noauthor"] .excerpts-author,
.excerpts-wrap[class*="norate"] .excerpts-rate,
.excerpts-wrap[class*="nocomn"] .excerpts-comment,
.excerpts-wrap[class*="nocomment"] .excerpts-comment,
.excerpts-wrap[class*="notags"] .excerpts-tags {
display: none;
}
.excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:last-child,
.excerpts-wrap[class*="trans"] .excerpts-trans {
display: contents;
}
/* 选填选项,不填写时不显示,替代上文选项 */
.excerpts-wrap .excerpts-chapter[style*="{$"],
.excerpts-wrap .excerpts-author[style*="{$"],
.excerpts-wrap .excerpts-rate[style*="{$"],
.excerpts-wrap .excerpts-comment[style*="{$"],
.excerpts-wrap .excerpts-tags[style*="{$"],
.excerpts-wrap .excerpts-trans[style*="{$"]{
display:none;
}
.excerpts-wrap .excerpts-interest:not([style*="{$"]){
display:block;
}
/* 左侧内容 */
.excerpts-left {
padding: 0 0.6rem;
border-right: 3px double #999;
border-color: var(--excborder-mid-color);
border-width: var(--excborder-mid-width);
}
.excerpts-left div {
display: block;
}
.excerpts-left .excerpts-tt p {
padding: 0;
margin: 0.4rem 0;
}
.excerpts-left .excerpts-tt {
font-size: 150%;
text-align: center;
border-bottom: 3px double #999;
border-color: var(--excborder-title-color);
border-width: var(--excborder-title-width);
}
.excerpts-excerpts {
min-height: 5rem;
}
/* 右侧信息表格 */
.excerpts-right {
padding: 0.5rem;
min-width: 20%;
width: 30%;
}
.excerpts-right table {
border-collapse: collapse;
border: none;
}
.excerpts-cell p {
font-weight: bolder;
}
.excerpts-wrap {
display: flex;
}
.excerpts-left {
min-width: 56%;
width: 70%;
}
.excerpts-cell-2,
.excerpts-cell-1 {
text-align: left;
vertical-align: top;
}
.excerpts-cell-1 {
word-break: keep-all;
white-space: nowrap;
min-width: 3rem;
}
.excerpts-wrap td {
padding-top: 0.8rem;
height: auto;
}
.excerpts-wrap td.excerpts-cell-2 {
padding-top: 0.6rem;
position: relative;
word-break: break-word;
}
/* 防止断行 */
.excerpts-wrap td strong:before {
content: ' ';
/*! font-size: 0.5rem; */
color: transparent;
padding-right: 0.2rem;
}
/* 关注 */
.excerpts-interest {
position: absolute;
left: var(--excerpts-interest-left);
right: var(--excerpts-interest-right);
width: var(--excerpts-interest-size);
margin-top: var(--excerpts-padding-opt);
z-index: 0;
filter: drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 1px var(--excerpts-interest-ddcolor)) drop-shadow(0px 0px 0px var(--excerpts-interest-ddcolor));
display: none;
user-select: none;
overflow: hidden;
}
.excerpts-interest-border {
width: 0;
height: 0;
border-style: solid;
border-width: 0 var(--excerpts-delta-size) var(--excerpts-delta-topsize) var(--excerpts-delta-size);
border-width: var(--excerpts-delta-size);
border-color: var(--excerpts-interest-bgcolor) var(--excerpts-interest-bgcolor) transparent var(--excerpts-interest-bgcolor);
}
.excerpts-interest-text {
background-color: var(--excerpts-interest-bgcolor);
}
.excerpts-interest p {
margin-top: 0rem;
text-align: center;
padding: 0 0 0.3rem 0;
margin: 0;
color: var(--excerpts-interest-txcolor);
font-size: var(--excerpts-interest-txsize);
}
.excerpts-interest.nicejob {
display: block;
}
/* 移动关注标签特效 */
.excerpts-left+.excerpts-right+.excerpts-interest div:first-child,
.excerpts-right+.excerpts-interest div:first-child {
transition: all 0.5s;
}
.excerpts-left:hover+.excerpts-right+.excerpts-interest div:first-child,
.excerpts-right:hover+.excerpts-interest div:first-child {
margin-top: -5rem;
transition: all 0.5s;
}
.excerpts-interest {
transition: opacity 0.5s;
}
.excerpts-interest:hover {
opacity: 0;
transition: opacity 0.5s;
}
/* 移动端换行 */
.excerpts-wrap sub {
font-size: inherit;
display: contents;
}
/* ------------------手机格式--------------------------- */
@media (max-width: 800px) {
.excerpts-interest {
right: 1rem;
}
}
@media (max-width: 600px) {
.excerpts-wrap tbody td {
display: inline-block;
}
}
@media (max-width: 757px) {
.excerpts-wrap {
flex-wrap: wrap;
}
.excerpts-right {
min-width: 100%;
padding: 0rem;
}
.excerpts-left {
min-width: 100%;
border: none;
border-bottom: 3px double #999;
padding: 0.5rem 0rem;
}
.excerpts-cell-2,
.excerpts-cell-1 {
/*! min-width:4rem; */
}
.excerpts-cell-1 {
min-width: 4rem;
}
.excerpts-wrap tbody {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.excerpts-wrap tbody tr {
width: 50%;
/*! display: inline-flex; */
}
.excerpts-interest {
right: var(--excerpts-interest-mobright);
left: var(--excerpts-interest-mobleft);
width: var(--excerpts-interest-mobsize);
}
.excerpts-interest-border {
border-width: var(--excerpts-delta-mobsize);
}
.excerpts-interest p {
font-size: 1rem;
padding: 0 0 0.2rem 0;
}
.excerpts-wrap sub {
font-size: inherit;
display: block;
}
/*.excerpts-cell-2 {
text-align: right;
}*/
.excerpts-wrap[class*="trans"] .excerpts-author .excerpts-cell-1 span:last-child,
.excerpts-wrap[class*="trans"] .excerpts-trans {
display: block;
text-align: right;
}
}