mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve styles
This commit is contained in:
parent
9d5f1cb02e
commit
fd02464c5e
@ -104,10 +104,12 @@ defineExpose({
|
||||
.banner-game-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #8882;
|
||||
@include v-stretch();
|
||||
@include round-corner();
|
||||
img {
|
||||
transition: transform 0.2s ease-out;
|
||||
aspect-ratio: 15 / 8;
|
||||
}
|
||||
&:hover img {
|
||||
transform: scale(1.05);
|
||||
@ -130,6 +132,11 @@ defineExpose({
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
transition: color 0.2s ease-out;
|
||||
img {
|
||||
background-color: #8882;
|
||||
border-radius: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--theme-color) !important;
|
||||
}
|
||||
@ -150,9 +157,10 @@ defineExpose({
|
||||
@include semi-bold();
|
||||
}
|
||||
.list-game-cards {
|
||||
@include v-stretch(8px);
|
||||
@include v-stretch();
|
||||
.list-game-card {
|
||||
@include single-line();
|
||||
padding: 4px 0;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s ease-out;
|
||||
&:hover {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { VLoading } from '@/ui'
|
||||
import { bilibiliApi } from '@/core/ajax'
|
||||
import { CustomNavbarItem } from '../custom-navbar-item'
|
||||
import { usePopper } from '../mixins'
|
||||
@ -91,8 +92,8 @@ defineExpose({
|
||||
class="hot-manga-card"
|
||||
:title="card.title"
|
||||
:href="'https://manga.bilibili.com/detail/mc' + card.comic_id"
|
||||
@mouseover="previewCard = card"
|
||||
@mouseout="previewCard = undefined"
|
||||
@mouseenter="previewCard = card"
|
||||
@mouseleave="previewCard = undefined"
|
||||
>
|
||||
<div class="hot-manga-card-title">
|
||||
{{ card.title }}
|
||||
@ -135,6 +136,8 @@ defineExpose({
|
||||
.recommend-manga-card-image {
|
||||
@include v-stretch();
|
||||
@include round-corner();
|
||||
background: #8882;
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -160,10 +163,11 @@ defineExpose({
|
||||
@include semi-bold();
|
||||
}
|
||||
.custom-navbar-manga-hot-list {
|
||||
@include v-stretch(8px);
|
||||
@include v-stretch();
|
||||
counter-reset: manga-item;
|
||||
.hot-manga-card {
|
||||
@include h-center(6px);
|
||||
padding: 4px 0;
|
||||
&-title {
|
||||
@include single-line();
|
||||
transition: color 0.2s ease-out, opacity 0.2s ease-out;
|
||||
@ -206,8 +210,12 @@ defineExpose({
|
||||
height: calc(100% - #{$gap});
|
||||
background-image: linear-gradient(to left, #fff 75%, transparent);
|
||||
padding: 18px 18px 18px 60px;
|
||||
body.dark & {
|
||||
background-image: linear-gradient(to left, #222 75%, transparent);
|
||||
}
|
||||
img {
|
||||
display: flex;
|
||||
background: #8882;
|
||||
height: 100%;
|
||||
aspect-ratio: 169 / 225;
|
||||
@include round-corner();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user