Jony/assets/css/joe.responsive.scss

663 lines
12 KiB
SCSS
Raw Normal View History

2021-02-11 12:07:57 +00:00
/* 基类:基于 最大屏幕 + 有侧边栏 下进行适配 */
html {
@media (max-width: 1760px) {
#live2d-widget {
visibility: hidden;
}
}
@media (max-width: 1400px) {
.joe_video__list-item {
grid-template-columns: repeat(5, 1fr);
}
.joe_live__play-player {
height: 500px;
}
.joe_list__item.single .thumbnail {
height: 230px;
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 150px;
}
}
@media (max-width: 1200px) {
.joe_wallpaper__list {
grid-template-columns: repeat(3, 1fr);
}
.joe_detail__friends {
grid-template-columns: repeat(2, 1fr);
}
.joe_video__list-item {
grid-template-columns: repeat(4, 1fr);
}
.joe_video__player-play {
height: 450px;
}
.joe_live__list {
grid-template-columns: repeat(2, 1fr);
}
.joe_live__play-player {
height: 450px;
}
.joe_detail__article-player {
height: 450px;
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 125px;
}
.joe_list__item.single .thumbnail {
height: 200px;
}
.joe_index__ad-link .image {
height: 180px;
}
.joe_index__hot-list .item .link .inner .image {
height: 90px;
}
.joe_index__banner {
display: block;
}
.joe_index__banner-recommend {
padding-top: 15px;
width: 100%;
margin-left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
&.noswiper {
padding-top: 0;
}
}
.joe_index__banner-recommend .item {
margin: 0 !important;
}
.joe_index__hot-list {
column-gap: 10px;
}
.joe_video__list-item .item .thumb {
height: 200px;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 420px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
2021-02-11 12:07:57 +00:00
}
@media (max-width: 992px) {
.joe_aside {
display: none;
}
.joe_video__list-item .item .thumb {
height: 220px;
}
.joe_video__source-list {
grid-template-columns: repeat(5, 1fr);
}
.joe_live__play-player {
height: 420px;
}
.joe_video__player-play {
height: 420px;
}
.joe_detail__article-player {
height: 420px;
}
.swiper-container {
height: 300px;
}
.swiper-container .item {
height: 300px;
}
.joe_header__above-logo {
padding-right: 0;
}
.joe_header__above-logo::after {
display: none;
}
.joe_header__above-search {
display: none;
}
.joe_header__above-searchicon {
display: block;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 420px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
2021-02-11 12:07:57 +00:00
}
@media (max-width: 768px) {
2021-02-14 12:17:09 +00:00
.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;
}
2021-02-11 12:07:57 +00:00
}
.swiper-container {
height: 180px;
.item {
height: 180px;
}
}
2021-02-13 07:12:18 +00:00
.joe_index {
&__banner {
&-recommend {
gap: 10px;
.item {
height: 100px;
2021-02-11 12:07:57 +00:00
}
}
}
2021-02-13 07:12:18 +00:00
&__hot {
&-list {
2021-02-15 08:54:51 +00:00
grid-template-columns: repeat(2, 1fr);
gap: 10px;
2021-02-11 12:07:57 +00:00
}
}
2021-02-13 07:12:18 +00:00
&__ad {
&-link {
.image {
height: 120px;
}
2021-02-11 12:07:57 +00:00
}
}
2021-02-13 07:12:18 +00:00
&__title {
&-notice {
display: none;
2021-02-11 12:07:57 +00:00
}
2021-02-13 07:12:18 +00:00
&-title {
.item {
2021-02-11 12:07:57 +00:00
display: none;
2021-02-13 07:12:18 +00:00
&:nth-child(1),
&:nth-child(2) {
display: block;
}
2021-02-11 12:07:57 +00:00
}
}
2021-02-13 07:12:18 +00:00
}
}
.joe_list {
&__item {
2021-02-11 12:07:57 +00:00
.information {
.title {
2021-02-13 07:12:18 +00:00
font-size: 16px;
2021-02-11 12:07:57 +00:00
}
.abstract {
2021-02-13 07:12:18 +00:00
display: none;
}
}
.meta {
.last {
display: none !important;
}
}
&.single {
.thumbnail {
height: 150px;
margin-bottom: 0;
time {
display: none;
}
}
}
&.default {
.information {
.title {
font-size: 15px;
}
}
.thumbnail {
width: 120px;
min-width: 120px;
height: 80px;
min-height: 80px;
margin-right: 10px;
time {
display: none;
}
}
.title {
margin-bottom: 0;
2021-02-11 12:07:57 +00:00
}
.meta {
2021-02-13 07:12:18 +00:00
.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;
max-height: 45px;
2021-02-11 12:07:57 +00:00
}
}
}
2021-02-15 08:54:51 +00:00
&__loading {
.item {
2021-02-18 05:06:37 +00:00
.thumbnail {
2021-02-15 08:54:51 +00:00
width: 120px;
min-width: 120px;
height: 80px;
min-height: 80px;
}
.information {
.title {
margin-bottom: 10px;
height: 20px;
}
.abstract {
p {
height: 15px;
}
}
}
}
}
2021-02-11 12:07:57 +00:00
}
.joe_wallpaper {
&__list {
grid-template-columns: repeat(2, 1fr);
}
&__pagination {
justify-content: center;
}
}
.joe_video {
&__list-item {
grid-template-columns: repeat(3, 1fr);
.item .thumb {
height: 140px;
}
}
&__pagination {
justify-content: center;
}
&__source-list {
grid-template-columns: repeat(3, 1fr);
}
&__player-play {
height: 230px;
}
}
.joe_live {
&__pagination {
justify-content: center;
}
&__list-item .thumb {
height: 100px;
}
2021-02-13 07:12:18 +00:00
&__play-player {
height: 200px;
}
}
.joe_detail {
&__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;
}
}
&__friends {
grid-template-columns: repeat(1, 1fr);
}
&__article {
font-size: 14px;
&-player {
height: 220px;
}
pre[class*='language-'] {
font-size: 13px;
}
2021-02-18 05:06:37 +00:00
&-video {
.play {
.box {
iframe {
height: 220px;
}
}
}
.episodes {
.box {
grid-template-columns: repeat(3, 1fr);
}
}
}
2021-02-13 07:12:18 +00:00
}
}
.joe_comment {
position: relative;
&__title {
font-size: 20px;
text-align: left;
}
&__respond-type {
position: absolute;
top: 15px;
right: 15px;
2021-02-18 05:06:37 +00:00
.item:first-child {
2021-02-16 12:43:23 +00:00
border-bottom-left-radius: var(--radius-inner);
}
2021-02-18 05:06:37 +00:00
.item:last-child {
2021-02-16 12:43:23 +00:00
border-bottom-right-radius: var(--radius-inner);
}
2021-02-13 07:12:18 +00:00
}
&__respond-form {
.head {
display: block;
border-bottom: none;
.list {
border-bottom: 1px solid var(--classB);
&:nth-child(2) {
&::before,
&::after {
display: none;
}
}
}
}
2021-02-14 12:17:09 +00:00
.body .text {
2021-02-13 07:12:18 +00:00
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;
2021-02-16 12:43:23 +00:00
.item {
&:first-child {
border-bottom-left-radius: 0;
}
&:last-child {
border-bottom-right-radius: 0;
}
}
2021-02-13 07:12:18 +00:00
}
}
2021-02-11 12:07:57 +00:00
}
2021-02-15 05:26:39 +00:00
.joe_footer .joe_container {
flex-direction: column;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
> .item {
padding: 5px 0;
2021-02-15 05:37:39 +00:00
}
.run {
margin: 0;
2021-02-15 05:26:39 +00:00
}
}
2021-02-11 12:07:57 +00:00
}
}
/* 没有侧边栏时候的样式 */
html .noaside {
.joe_detail__friends {
grid-template-columns: repeat(4, 1fr);
}
.joe_video__list-item {
grid-template-columns: repeat(7, 1fr);
}
.joe_video__source-list {
grid-template-columns: repeat(8, 1fr);
}
.joe_live__list {
grid-template-columns: repeat(4, 1fr);
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 200px;
}
.joe_list__item.single .thumbnail {
height: 300px;
}
.joe_index__ad-link .image {
height: 250px;
}
.joe_index__hot-list .item .link .inner .image {
height: 140px;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 600px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(8, 1fr);
}
2021-02-11 12:07:57 +00:00
@media (max-width: 1400px) {
.joe_video__list-item {
grid-template-columns: repeat(6, 1fr);
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 180px;
}
.joe_list__item.single .thumbnail {
height: 270px;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 550px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(7, 1fr);
}
2021-02-11 12:07:57 +00:00
}
@media (max-width: 1200px) {
.joe_wallpaper__list {
grid-template-columns: repeat(4, 1fr);
}
.joe_detail__friends {
grid-template-columns: repeat(3, 1fr);
}
.joe_live__list {
grid-template-columns: repeat(3, 1fr);
}
.joe_index__hot-list .item .link .inner .image {
height: 120px;
}
.joe_list__item.single .thumbnail {
height: 250px;
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 150px;
}
.joe_index__banner-recommend .item {
height: 180px;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 500px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(6, 1fr);
}
2021-02-11 12:07:57 +00:00
}
@media (max-width: 992px) {
.joe_wallpaper__list {
grid-template-columns: repeat(3, 1fr);
}
.joe_detail__friends {
grid-template-columns: repeat(2, 1fr);
}
.joe_video__list-item {
grid-template-columns: repeat(4, 1fr);
}
.joe_video__source-list {
grid-template-columns: repeat(5, 1fr);
}
.joe_live__list {
grid-template-columns: repeat(2, 1fr);
}
.joe_index__banner-recommend .item {
height: 160px;
}
.joe_index__hot-list .item .link .inner .image {
height: 90px;
}
.joe_index__ad-link .image {
height: 200px;
}
.joe_list__item.single .thumbnail {
height: 220px;
}
.joe_list__item.multiple .thumbnail {
grid-template-rows: 130px;
}
2021-02-18 05:06:37 +00:00
.joe_detail__article-video .play .box iframe {
height: 400px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
2021-02-11 12:07:57 +00:00
}
2021-02-13 07:12:18 +00:00
@media (max-width: 768px) {
.joe_wallpaper {
&__list {
grid-template-columns: repeat(2, 1fr);
}
}
.joe_detail {
&__friends {
grid-template-columns: repeat(1, 1fr);
}
2021-02-18 05:06:37 +00:00
&__article {
&-video {
.play {
.box {
iframe {
height: 220px;
}
}
}
.episodes {
.box {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
2021-02-13 07:12:18 +00:00
}
.joe_video {
&__list-item {
grid-template-columns: repeat(3, 1fr);
.item .thumb {
height: 140px;
}
}
&__source-list {
grid-template-columns: repeat(3, 1fr);
}
}
.joe_index {
&__banner {
&-recommend {
gap: 10px;
.item {
height: 100px;
}
}
}
&__ad {
&-link {
.image {
height: 120px;
}
}
}
}
.joe_list {
&__item {
&.single {
.thumbnail {
height: 150px;
}
}
&.multiple {
.thumbnail {
grid-template-rows: 70px;
}
}
}
}
}
2021-02-11 12:07:57 +00:00
}