@charset "utf-8";

/* PP论坛 · 网页右侧「我的收藏」浮层
   挂在 common/footer.htm，仅在论坛首页 / 版块页 / 帖子页、且已登录时输出 */

/* ---------- 侧边标签 ---------- */
.ppfav-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 950;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	align-items: center;
	justify-content: center;
	width: 42px;
	padding: 16px 5px 18px;
	box-sizing: border-box;
	background: #2b2b2b;
	color: #fff;
	text-align: center;
	border-radius: 8px 0 0 8px;
	box-shadow: -3px 0 12px rgba(0, 0, 0, .12);
	cursor: pointer;
	transition: right .28s ease, opacity .18s ease, background .2s ease;
	-webkit-user-select: none;
	user-select: none;
}
.ppfav-tab:hover {
	background: #00aa98;
	color: #fff;
	text-decoration: none;
}
.ppfav-tab .ppfav-tab-in {
	display: block;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}
.ppfav-tab .ppfav-tab-in i {
	font-style: normal;
	font-size: 13px;
	color: #ffd24d;
}
.ppfav-dot {
	position: absolute;
	left: -9px;
	top: -8px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	background: #e4393c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	border-radius: 9px;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(228, 57, 60, .35);
}
body.ppfav-open .ppfav-tab {
	right: 320px;
	opacity: 0;
	pointer-events: none;
}

/* ---------- 浮层面板 ---------- */
.ppfav-panel {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 951;
	width: 320px;
	max-height: 78vh;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	background: #fff;
	border-radius: 10px 0 0 10px;
	box-shadow: -6px 0 30px rgba(0, 0, 0, .14);
	transform: translate(104%, -50%);
	opacity: 0;
	pointer-events: none;
	transition: transform .28s ease, opacity .2s ease;
	overflow: hidden;
	font-family: "Microsoft Yahei", Tahoma, Helvetica, SimSun, sans-serif;
}
.ppfav-panel.is-open {
	transform: translate(0, -50%);
	opacity: 1;
	pointer-events: auto;
}

/* 头部 */
.ppfav-hd {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 46px;
	flex: 0 0 46px;
	padding: 0 10px 0 14px;
	border-bottom: 1px solid #f0f0f0;
	background: #fcfcfc;
}
.ppfav-hd strong {
	font-size: 14px;
	font-weight: 600;
	color: #222;
	margin-right: auto;
	line-height: 1;
}
.ppfav-hd strong em {
	display: inline-block;
	font-style: normal;
	font-size: 11px;
	font-weight: 400;
	line-height: 18px;
	color: #8c8c8c;
	background: #f0f0f0;
	border-radius: 9px;
	padding: 0 7px;
	margin-left: 7px;
	vertical-align: 1px;
}
.ppfav-hd strong em:empty {
	display: none;
}
.ppfav-all {
	font-size: 12px;
	color: #999 !important;
	margin-right: 10px;
}
.ppfav-all:hover {
	color: #00aa98 !important;
	text-decoration: none;
}
.ppfav-x {
	font-size: 18px;
	line-height: 1;
	color: #c2c2c2 !important;
	padding: 0 2px;
}
.ppfav-x:hover {
	color: #666 !important;
	text-decoration: none;
}

/* 列表 */
.ppfav-bd {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}
.ppfav-bd::-webkit-scrollbar {
	width: 6px;
}
.ppfav-bd::-webkit-scrollbar-thumb {
	background: #dcdcdc;
	border-radius: 3px;
}
.ppfav-bd::-webkit-scrollbar-thumb:hover {
	background: #c6c6c6;
}
.ppfav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ppfav-i {
	position: relative;
	padding: 9px 14px 10px;
	border-bottom: 1px dashed #f2f2f2;
	list-style: none;
}
.ppfav-i:last-child {
	border-bottom: 0;
}
.ppfav-i:hover {
	background: #f8fbfa;
}
.ppfav-i.is-new {
	background: #fffafa;
	box-shadow: inset 3px 0 0 #e4393c;
}
.ppfav-i.is-new:hover {
	background: #fff5f5;
}
.ppfav-t {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: #333 !important;
	word-break: break-all;
	text-decoration: none;
}
.ppfav-t:hover {
	color: #00aa98 !important;
	text-decoration: none;
}
.ppfav-i.is-new .ppfav-t {
	font-weight: 600;
	color: #222 !important;
}
.ppfav-new {
	display: inline;
	color: #e4393c;
	font-size: 11px;
	font-weight: 700;
	margin-left: 3px;
	white-space: nowrap;
}
.ppfav-m {
	margin: 5px 0 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: baseline;
	align-items: baseline;
	font-size: 11px;
	line-height: 1.4;
	color: #b3b3b3;
}
.ppfav-f {
	flex: 0 1 auto;
	max-width: 62%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #b3b3b3;
}
.ppfav-d {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 8px;
	color: #c2c2c2;
	white-space: nowrap;
}
.ppfav-i.is-new .ppfav-d {
	color: #e4393c;
}

/* 空状态 */
.ppfav-empty {
	padding: 46px 26px;
	text-align: center;
	font-size: 13px;
	line-height: 2;
	color: #999;
}
.ppfav-empty span {
	font-size: 12px;
	color: #c0c0c0;
}

/* 底部 */
.ppfav-ft {
	flex: 0 0 32px;
	height: 32px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding: 0 14px;
	border-top: 1px solid #f4f4f4;
	background: #fcfcfc;
	font-size: 11px;
	color: #c0c0c0;
}
.ppfav-dead {
	color: #ccc;
}

/* 展开时把「返回顶部 / 快速回复 / 站点提示框」让开 */
body.ppfav-open #scrolltop,
body.ppfav-open #ip_notice,
body.ppfav-open #patch_notice,
body.ppfav-open #plugin_notice {
	right: 330px;
}

@media (max-width: 640px) {
	.ppfav-tab, .ppfav-panel {
		display: none !important;
	}
}
@media print {
	.ppfav-tab, .ppfav-panel {
		display: none !important;
	}
}