Jony/assets/css/joe.responsive.min.scss

/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */

html {
	@media (max-width: 1760px) {
		#live2d-widget {
			visibility: hidden;
		}
	}

	@media (max-width: 1400px) {
		.joe {
			&_wallpaper {
				&__list {
					grid-template-columns: repeat(3, 1fr);
				}
			}
			&_video {
				&__list {
					&-item {
						.item {
							.thumb {
								height: 210px;
							}
						}
					}
				}
				&__detail {
					&-info {
						.thumbnail {
							width: 165px;
							height: 235px;
						}
					}
				}
				&__player {
					&-play {
						height: 480px;
					}
				}
			}
			&_live {
				&__play {
					&-player {
						height: 500px;
					}
				}
			}
			&_detail {
				&__article {
					&-player {
						height: 450px;
					}
					&-video {
						.play .box iframe {
							height: 500px;
						}
					}
				}
				&__leaving {
					&-list {
						height: 450px;
					}
				}
			}
			&_owo {
				&__contain {
					.box .scroll .item {
						width: calc(100% / 15);
					}
				}
			}
			&_list {
				&__item {
					&.single {
						.thumbnail {
							height: 250px;
						}
					}
					&.multiple {
						.thumbnail {
							grid-template-rows: 160px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 1200px) {
		.joe {
			&_detail {
				&__friends {
					grid-template-columns: repeat(2, 1fr);
				}
				&__article {
					&-player {
						height: 430px;
					}
					&-video {
						.play .box iframe {
							height: 430px;
						}
						.episodes .box {
							grid-template-columns: repeat(5, 1fr);
						}
					}
				}
				&__leaving {
					&-list {
						height: 400px;
					}
				}
			}
			&_video {
				&__list {
					&-item {
						grid-template-columns: repeat(4, 1fr);
						.item {
							.title {
								height: 34px;
								line-height: 34px;
							}
						}
					}
				}
				&__detail {
					&-info {
						.thumbnail {
							width: 155px;
							height: 220px;
						}
					}
				}
				&__player {
					&-play {
						height: 450px;
					}
				}
				&__source {
					&-list {
						grid-template-columns: repeat(5, 1fr);
					}
				}
			}
			&_owo {
				&__contain {
					.box .scroll .item {
						width: calc(100% / 12);
					}
				}
			}
			&_live {
				&__play {
					&-player {
						height: 430px;
					}
				}
				&__list {
					grid-template-columns: repeat(2, 1fr);
				}
			}
			&_list {
				&__item {
					&.single {
						.thumbnail {
							height: 210px;
						}
					}
					&.multiple {
						.thumbnail {
							grid-template-rows: 125px;
						}
					}
					&.default {
						.thumbnail {
							width: 185px;
							height: 125px;
						}
					}
				}
			}
			&_index {
				&__ad {
					&-link {
						.image {
							height: 180px;
						}
					}
				}
				&__hot {
					&-list {
						column-gap: 10px;
						.item .link .inner .image {
							height: 90px;
						}
					}
				}
				&__banner {
					display: block;
					&-recommend {
						padding-top: 15px;
						width: 100%;
						margin-left: 0;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						gap: 15px;
						&.noswiper {
							padding-top: 0;
						}
						.item {
							height: 145px;
							margin: 0 !important;
						}
					}
				}
			}
		}
		.swiper-container {
			height: 280px;
			.item {
				height: 280px;
			}
		}
	}

	@media (max-width: 992px) {
		.joe {
			&_aside {
				display: none;
			}
			&_video {
				&__player {
					&-play {
						height: 400px;
					}
				}
			}
			&_live {
				&__play {
					&-player {
						height: 400px;
					}
				}
			}
			&_detail {
				&__article {
					&-player {
						height: 400px;
					}
					&-video {
						.play .box iframe {
							height: 400px;
						}
						.episodes .box {
							grid-template-columns: repeat(5, 1fr);
						}
					}
				}
				&__leaving {
					&-list {
						height: 350px;
					}
				}
			}
			&_index {
				&__hot {
					&-list {
						.item .link .inner .image {
							height: 95px;
						}
					}
				}
				&__banner {
					&-recommend {
						.item {
							height: 135px;
							margin: 0 !important;
						}
					}
				}
			}
			&_header {
				&__above {
					&-logo {
						padding-right: 0;
						&::after {
							display: none;
						}
					}
					&-search {
						display: none;
					}
					&-searchicon {
						display: block;
					}
				}
			}
		}
		.swiper-container {
			height: 250px;
			.item {
				height: 250px;
			}
		}
	}

	@media (max-width: 768px) {
		.joe {
			&_header {
				&__above {
					.joe_container {
						justify-content: space-between;
					}
					&-nav {
						display: none;
					}
					&-logo {
						height: 55px;
						margin-right: 0;
						img {
							max-height: 45px;
						}
					}
					&-searchicon {
						margin-left: 0;
					}
					&-slideicon {
						display: block;
					}
				}
				&__below {
					display: none;
				}
				&__searchout {
					top: 55px;
				}
			}
			&_index {
				&__banner {
					&-recommend {
						gap: 10px;
						.item {
							height: 100px;
						}
					}
				}
				&__hot {
					&-list {
						grid-template-columns: repeat(2, 1fr);
						gap: 10px;
					}
				}
				&__ad {
					&-link {
						.image {
							height: 120px;
						}
					}
				}
				&__title {
					&-notice {
						display: none;
					}
					&-title {
						.item {
							display: none;
							&:nth-child(1),
							&:nth-child(2) {
								display: block;
							}
						}
					}
				}
			}
			&_list {
				&__item {
					.information {
						.title {
							font-size: 16px;
						}
						.abstract {
							display: none;
						}
					}
					.meta {
						.last {
							display: none !important;
						}
					}
					&.single {
						.thumbnail {
							height: 130px;
							margin-bottom: 0;
							time,
							svg {
								display: none;
							}
						}
					}
					&.default {
						.information {
							.title {
								font-size: 15px;
							}
						}
						.thumbnail {
							width: 120px;
							height: 80px;
							margin-right: 10px;
							time,
							svg {
								display: none;
							}
						}
						.title {
							margin-bottom: 0;
						}
						.meta {
							.items {
								width: 100%;
								li {
									display: none;
									&:nth-child(1) {
										display: block;
									}
									&:nth-child(2) {
										display: block;
										margin-left: auto;
									}
									&::after {
										display: none;
									}
								}
							}
						}
					}
					&.multiple {
						.thumbnail {
							grid-template-rows: 70px;
							gap: 10px;
						}
					}
					&.none {
						.information {
							height: 120px;
						}
						.abstract {
							display: -webkit-box;
							font-size: 13px;
						}
					}
				}
				&__loading {
					.item {
						.thumbnail {
							width: 120px;
							height: 80px;
						}
						.information {
							.title {
								margin-bottom: 10px;
								height: 20px;
							}
							.abstract {
								p {
									height: 15px;
								}
							}
						}
					}
				}
			}
			&_wallpaper {
				&__list {
					grid-template-columns: repeat(2, 1fr);
				}
				&__pagination {
					justify-content: center;
				}
			}
			&_detail {
				&__friends {
					grid-template-columns: repeat(1, 1fr);
				}
				&__title {
					font-size: 18px;
				}
				&__count {
					&-information {
						width: 100%;
						.avatar {
							display: none;
						}
						.meta {
							width: 100%;
							height: unset;
							.author {
								display: none;
							}
							.item {
								justify-content: center;
								span:nth-child(2),
								span:nth-child(3) {
									display: none;
								}
							}
						}
					}
					&-created {
						display: none;
					}
					&::after {
						display: none;
					}
				}
				&__article {
					font-size: 14px;
					&-player {
						height: 225px;
					}
					pre[class*='language-'] {
						font-size: 13px;
					}
					&-video {
						.play {
							.box {
								iframe {
									height: 225px;
								}
							}
						}
						.episodes {
							.box {
								grid-template-columns: repeat(3, 1fr);
								gap: 10px;
							}
						}
					}
				}
				&__leaving {
					&-list {
						height: 300px;
						.item {
							font-size: 12px;
							width: 160px;
							min-height: unset;
							.user {
								padding: 0 8px;
								height: 35px;
								.avatar {
									width: 15px;
									height: 15px;
								}
							}
							.wrapper {
								padding: 8px;
								.content {
									max-height: 109px;
									line-height: 18px;
								}
							}
						}
					}
				}
				&__copyright {
					.content {
						.item {
							font-size: 13px;
							.icon {
								width: 16px;
								height: 16px;
							}
						}
					}
				}
			}
			&_video {
				&__list {
					&-item {
						grid-template-columns: repeat(2, 1fr);
						.item {
							.thumb {
								height: 200px;
							}
						}
					}
				}
				&__pagination {
					justify-content: center;
				}
				&__detail {
					&-info {
						.thumbnail {
							width: 125px;
							height: 180px;
						}
						.description {
							dt {
								font-size: 16px;
								margin-bottom: 8px;
							}
							dd {
								font-size: 12px;
								margin-bottom: 5px;
								line-height: 20px;
								max-height: 40px;
								&:not(:last-child) {
									-webkit-line-clamp: 1;
								}
							}
						}
					}
				}
				&__player {
					&-play {
						height: 225px;
					}
				}
				&__source {
					&-list {
						grid-template-columns: repeat(3, 1fr);
					}
				}
			}
			&_live {
				&__pagination {
					justify-content: center;
				}
				&__list {
					grid-template-columns: repeat(1, 1fr);
				}
				&__play {
					&-player {
						height: 185px;
					}
				}
			}
			&_footer {
				.joe_container {
					flex-direction: column;
					justify-content: center;
					padding-top: 10px;
					padding-bottom: 10px;
					> .item {
						padding: 5px 0;
					}
					.run {
						margin: 0;
					}
				}
			}
			&_owo {
				&__contain {
					.box .scroll {
						.item {
							width: calc(100% / 6);
						}
						&:nth-child(3) .item {
							width: calc(100% / 2);
						}
					}
				}
			}
			&_comment {
				position: relative;
				&__title {
					font-size: 18px;
					line-height: 32px;
					text-align: left;
				}
				&__respond-type {
					position: absolute;
					top: 15px;
					right: 15px;
					.item:first-child {
						border-bottom-left-radius: var(--radius-inner);
					}
					.item:last-child {
						border-bottom-right-radius: var(--radius-inner);
					}
				}
				&__respond-form {
					.head {
						display: block;
						border-bottom: none;
						.list {
							border-bottom: 1px solid var(--classB);
							&:nth-child(2) {
								&::before,
								&::after {
									display: none;
								}
							}
						}
					}
					.body .text {
						height: 140px;
					}
				}
				.comment-list__item-contain .term .avatar {
					width: 34px;
					height: 34px;
					margin-right: 10px;
				}
				.comment-list__item-contain .term .content .user .agent {
					display: none;
				}
				.comment-list__item-children {
					padding-left: 0;
				}
				.comment-list__item .joe_comment__respond {
					margin-left: 0;
					&-type {
						position: static;
						.item {
							&:first-child {
								border-bottom-left-radius: 0;
							}
							&:last-child {
								border-bottom-right-radius: 0;
							}
						}
					}
				}
			}
		}
		.swiper-container {
			height: 180px;
			.item {
				height: 180px;
			}
		}
	}
}