Template:首页/episodes/style.css:修订间差异

模板页面
无编辑摘要
(// Edit via Wikiplus)
 
(未显示2个用户的35个中间版本)
第1行: 第1行:
body {
body {
overflow-x: hidden;
overflow-x: hidden;
}

.scroller-container {
height: 18em;
}
}


.latest-item-episode {
.latest-item-episode {
font-size: .9em;
font-size: .9em;
}
}


.latest-item-info {
.latest-item-info {
padding: .6em;
padding: .6em;
white-space: nowrap;
white-space: nowrap;
width: 9em;
}
}


.latest-item-info p {
.latest-item-info p {
overflow: hidden;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
}
}


.latest-item-more {
.latest-item-more {
width: 4em;
width: 4em;
height: 4em;
height: 4em;
border-radius: 999px;
border-radius: 999px;
text-align: center;
text-align: center;
}

.comic-header img {
width: 11em;
height: 10em;
object-fit: cover;
}
}


.scroller-item {
.scroller-item {
flex-wrap: wrap;
flex-wrap: wrap;
display: flex;
display: flex;
margin: .8em;
margin: .8em;
width: 11em;
width: 11em;
height: 200px;
height: 200px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
border: 1px solid rgba(0, 0, 0, .12);
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
border-radius: 4px;
transition: all .2s;
transition: all .2s;
}

.scroller-item:nth-child(1) {
margin-left: 5%;
}
}


.scroller-item:hover {
.scroller-item:hover {
border-color: var(--color-primary--hover);
border-color: var(--color-primary--hover);
transition: all .2s;
transition: all .2s;
}
}


.scroller-item-now {
.scroller-item-now {
border-color: var(--color-primary);
border-color: var(--color-primary);
transition: all .2s;
transition: all .2s;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.0975);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.0975);
}
}


.latest-item-more-text {
.scroller-btn {
position: absolute;
width: 4em;
display: block;
height: 4em;
width: 2em;
line-height: 4em;
height: 2em;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 99px;
transition: all .2s;
line-height: 2em;
font-size: 1.2em;
background-color: #fff;
text-align: center;
user-select: none;
}
}


.scroller-btn:hover {
.scroller {
position: relative;
border-color: var(--color-primary--hover);
transition: all .2s;
}
}


.latest-item-more-text {
width: 4em;
height: 4em;
line-height: 4em;
}


@media screen and (max-width:768px) {
.latest-item-click {
.home-card--col2 {
position: absolute;
grid-column: span 4;
}
}
}


.scroller-container {
.latest-item-click a img {
width: 11em;
height: 18em;
height: 13em;
display: flex;
opacity: 0;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
overflow-x: auto;
width: 90%;
overflow-y: hidden;
margin: .8em;
margin-left: 5%;
}
}


.comic-header a img {
.scroller {
position: relative;
height: 10em;
width: 10em;
border-radius: 4px 4px 0 0;
object-fit: cover;
}
}


#scroller-last-btn {
.scroller-item {
position: absolute;
flex-wrap: wrap;
top: 45%;
display: flex;
left: 7px;
justify-content: left;
margin: .8em;
width: 10em;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 4px;
transition: all .2s;
}
}


#scroller-next-btn {
position: absolute;
top: 45%;
right: 7px;
}


.scroller-item:hover {
@media screen and (max-width:768px) {
border-color: var(--color-primary--hover);
.home-card--col2 {
transition: all .2s;
grid-column: span 4;
}
}
@media screen and (max-width: 640px){
#scroller-last-btn{
/*visibility: hidden; */
opacity: 0;
pointer-events: none;
}
#scroller-last-btn::after{
content: '向左划';
height: 200px;
width: 30px;
display: block;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.5);
}
}
}

2024年2月18日 (日) 09:01的最新版本

body {
  overflow-x: hidden;
}

.latest-item-episode {
  font-size: .9em;
}

.latest-item-info {
  padding: .6em;
  white-space: nowrap;
  width: 9em;
}

.latest-item-info p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-item-more {
  width: 4em;
  height: 4em;
  border-radius: 999px;
  text-align: center;
}

.scroller-item {
  flex-wrap: wrap;
  display: flex;
  margin: .8em;
  width: 11em;
  height: 200px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 4px;
  transition: all .2s;
}

.scroller-item:hover {
  border-color: var(--color-primary--hover);
  transition: all .2s;
}

.scroller-item-now {
  border-color: var(--color-primary);
  transition: all .2s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 5px 8px rgba(0, 0, 0, 0.0975);
}

.latest-item-more-text {
  width: 4em;
  height: 4em;
  line-height: 4em;
}

.scroller {
  position: relative;
}


@media screen and (max-width:768px) {
  .home-card--col2 {
    grid-column: span 4;
  }
}

.scroller-container {
  height: 18em;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  width: 90%;
  overflow-y: hidden;
  margin: .8em;
  margin-left: 5%;
}

.comic-header a img {
  height: 10em;
  width: 10em;
  border-radius: 4px 4px 0 0;
  object-fit: cover;
}

.scroller-item {
  flex-wrap: wrap;
  display: flex;
  justify-content: left;
  margin: .8em;
  width: 10em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 4px;
  transition: all .2s;
}


.scroller-item:hover {
  border-color: var(--color-primary--hover);
  transition: all .2s;
}