/**
 * 页脚/全站底部样式（foot.html）
 */

/* tabbar / extra */
.myui-nav__tabbar .item > .btn {
	padding: 5px 10px;
}

#js-index-tabbar-types {
	display: contents;
}

.myui-extra .backtop {
	display: none;
}

.detail-toggle-icon {
	font-size: 10px;
}

/* 翻译按钮激活态 */
.btntrans.active {
	background-color: #ff6900 !important;
	color: #fff !important;
}

.btntrans.active i {
	color: #fff !important;
	animation: fe-foot-pulse 1.5s ease-in-out infinite;
}

@keyframes fe-foot-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* 面包屑 */
.breadcrumb-nav {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 10px 0;
}

@media (max-width: 768px) {
	.breadcrumb-nav {
		font-size: 12px;
		padding: 8px 0;
	}

	.breadcrumb-nav .breadcrumb-title {
		display: inline-block;
		max-width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: bottom;
	}

	.detail-collapse-info {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.detail-collapse-info.show {
		max-height: 500px;
	}

	.detail-toggle-link {
		display: inline-block;
		padding: 2px 0;
	}

	.detail-toggle-link:hover {
		text-decoration: none;
		color: #666 !important;
	}

	.myui-panel {
		margin-bottom: 5px !important;
	}

	.myui-panel-box {
		padding-bottom: 5px !important;
	}
}

@media (min-width: 769px) {
	.detail-collapse-info {
		max-height: none !important;
	}

	.detail-toggle-link {
		display: none;
	}
}

/* 暗色主题文章正文 */
body:has(link[name="default"][href*="color1"]) .myui-article__content,
body:has(link[name="default"][href*="mytheme-color1"]) .myui-article__content {
	background-color: #2d2d2d !important;
	color: #d4d4d4 !important;
}

body:has(link[name="default"][href*="color1"]) .myui-article__content p,
body:has(link[name="default"][href*="mytheme-color1"]) .myui-article__content p {
	color: #d4d4d4 !important;
}

body:has(link[name="default"][href*="color1"]) .myui-article__content h1,
body:has(link[name="default"][href*="color1"]) .myui-article__content h2,
body:has(link[name="default"][href*="color1"]) .myui-article__content h3,
body:has(link[name="default"][href*="mytheme-color1"]) .myui-article__content h1,
body:has(link[name="default"][href*="mytheme-color1"]) .myui-article__content h2,
body:has(link[name="default"][href*="mytheme-color1"]) .myui-article__content h3 {
	color: #e8e8e8 !important;
}

/* 彩虹字 */
.masked p {
	display: block;
	background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
		#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 200% 100%;
	animation: fe-foot-masked 4s infinite linear;
}

@keyframes fe-foot-masked {
	0% { background-position: 0 0; }
	100% { background-position: -100% 0; }
}